[英]Add JavaScript code to an HTML page using JavaScript
I have an HTML form that takes field values to outputs custom instructions HTML & JavaScript instructions. 我有一个HTML表单,该表单需要字段值来输出自定义指令HTML和JavaScript指令。
When the user fills the form and submits, JS code executes to inject the instructions at the bottom of the page. 用户填写表单并提交时,将执行JS代码以将说明插入页面底部。 As soon as I include the
<script>
, the script "dies" and the button stops working. 一旦包含
<script>
,脚本就会“死亡”并且按钮停止工作。 I don't understand what is going on. 我不明白发生了什么。
Below is my code. 下面是我的代码。 Let me know if you need anything else.
需要帮助请叫我。
<html>
<head>
<script type="text/javascript">
function formInfo(personalCode)
{
var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p><pre><script src='https://" + personalCode + ".customapi.com'></script></pre>";
document.getElementById('returnedHtml').innerHTML = instructionHttp;
}
</script>
</head>
<body>
<h1>Instructions Generator</h1>
<form name="myform" action="" method="GET">
<div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" value="" autofocus ><br>
<input type="button" value="submit" onclick="
code=document.myform.signupcode.value;
formInfo(signupcode);"> <br>
</form>
<br><hr><br>
<p>--- Customized Instructions ---</p>
<br>
<div id="returnedHtml"></div><br>
</body>
I have also tried replacing formInfo() with the following 我也尝试用以下内容替换formInfo()
<script type="text/javascript">
function formInfo(personalCode)
{
var pre1 = document.createElement('pre');
var api = document.createElement('script');
api.src = "https://" + personalCode + ".customapi.com";
pre1.appendChild(api);
var instructionHttp = "<p># Step 1 - Add " + personalCode + "'s API</p>";
instructionHttp.appendChild(pre1);
document.getElementById('returnedHtml').innerHTML = instructionHttp;
}
</script>
You can not create an element with HTML; 您不能使用HTML创建元素; you can only create an element by its tag name (you can set its text with the
textContent
attribute) to append to a DOM element. 您只能通过其标签名称创建一个元素(可以使用
textContent
属性设置其文本)以附加到DOM元素。
<html> <head> <script type="text/javascript"> function formInfo(personalCode) { //var pre1 = document.createElement('pre'); var api = document.createElement('script'); api.src = "https://" + personalCode + ".customapi.com"; //pre1.appendChild(api); var instructionHttp = "<p></p>"; var instructionHttp = document.createElement("p"); instructionHttp.textContent = "# Step 1 - Add " + personalCode + "'s API"; instructionHttp.appendChild(api); document.getElementById('returnedHtml').innerHTML = instructionHttp.innerHTML; } </script> </head> <body> <h1>Instructions Generator</h1> <form name="myform" action="" method="GET"> <div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" value="" autofocus ><br> <input type="button" value="submit" onclick=" code=document.myform.signupcode.value; formInfo(code);"> <br> </form> <br><hr><br> <p>--- Customized Instructions ---</p> <br> <div id="returnedHtml"></div><br> </body> </html>
You tried to create html from string and just append to element, it's wrong, you must create elements as you did with script
and pre
. 您尝试从字符串创建html并将其追加到element上,这是错误的,您必须像使用
script
和pre
一样创建元素。
This code will work for you: 该代码将为您工作:
<html>
<head>
<script type="text/javascript">
function formInfo()
{
var personalCode = document.getElementById('signupcode').value
var pre1 = document.createElement('pre');
var api = document.createElement('script');
api.src = "https://" + personalCode + ".customapi.com";
pre1.appendChild(api);
var instructionHttp = document.createElement('p');
instructionHttp.innerHTML = "# Step 1 - Add " + personalCode + "'s API"
instructionHttp.appendChild(pre1);
document.getElementById('returnedHtml').innerHTML = instructionHttp.outerHTML;
}
</script>
</head>
<body>
<h1>Instructions Generator</h1>
<form name="myform" action="" method="GET">
<div class="showLabel"><label for="signupcode">Code</label></div><input type="text" name="signupcode" id="signupcode" value="" autofocus ><br>
<input type="button" value="submit" onclick="formInfo()"> <br>
</form>
<br><hr><br>
<p>--- Customized Instructions ---</p>
<br>
<div id="returnedHtml"></div><br>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.