사용자 입력을 html로 src에 매개 변수로 전달합니다.

사용자 입력을 수집하여 변수에 저장하고 Google 사용자 정의 검색 API를 호출하는 src 태그로 전달하려는 양식 필드가 HTML에 있습니다. 프런트 엔드에서만 작동하는 방법이 있습니까?사용자 입력을 html로 src에 매개 변수로 전달합니다.

형태 :

<body> 
    <form id="InputForm" method="post" > 
    <fieldset> 
     <legend>Input Form</legend> 
     <div> 
     <label for="Task">To do...</label> 
     <input type="text" id="Task" value="" style="width: 600px;" /> 
     </div> 
     <div class="submitLabel" style="margin-left: 425px;"> 
     <label>&nbsp;</label> 
     <input type="submit" value="Submit"/> 
     </div> 
    </fieldset> 
    </form> 
</body>

그리고 SRC 태그 :

<script src="https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q=VARIABLEHERE&amp;callback=hndlr">

내가에서 getElementById를 사용하여 변수에 사용자 입력을 저장하려고했으나에서 변수를 삽입하려고 아무 성공이 없었습니다 src 속성.

var param = document.getElementById("Task").value; 
    var script = document.createElement("script"); 
    script.src = "https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q='+param+'&amp;callback=hndlr" 
    document.getElementsByTagName("script")[0].parentNode.appendChild(script);

hndlr 함수는 API에서 반환 한 결과를 형식화하고 표시합니다. 사전 정의 된 q 매개 변수를 사용할 때 작동합니다.

출처

2017-12-18 B. Lim

'내가에서 getElementById를 사용하여 변수에 사용자 입력을 저장하려고했으나 삽입하려고 어떠한 성공이 없었습니다 src 속성의 변수 .' - 왜이 코드가 작동하지 않을지 알 수 있도록이 코드를 공유하십시오. 자세한 내용은 [** 최소, 완전하고 검증 가능한 예제를 만드는 방법 **] (https://stackoverflow.com/help/mcve)를 참조하십시오. – Nope

코드가 추가되었습니다. 이것은 솔루션에서 다른 질문으로 변경되었지만 프론트 엔드 언어에 익숙하지 않아서 HTML DOM이 Javascript와 함께 작동하는지 잘 모르겠습니다. –

이미 원하는 데이터가있는 변수가 있으면 스크립트 태그의 src 속성에 변수를 삽입하는 것이 매우 쉽습니다.

당신은 사용자 정의 src 속성으로 새 스크립트 태그를 만들 수 jQuery를 사용할 수 있습니다

var myData = "ThisDataHere"; 
$('<script>').attr({ 
    src: 'https://www.googleapis.com/customsearch/v1?key=MYKEY&amp;cx=017576662512468239146:omuauf_lfve&amp;q='+myData+'&amp;callback=hndlr', 
    type: 'text/javascript'}).appendTo('body')

출처

2017-12-18 15:43:00 Drummad

사용자 입력을 html로 src에 매개 변수로 전달합니다.

답변

관련 문제