Add JavaScript code to an HTML page using JavaScript
Question
I have an HTML form that takes field values to outputs custom instructions HTML & JavaScript instructions.
When the user fills the form and submits, JS code executes to inject the instructions at the bottom of the page. As soon as I include the <script> , the script "dies" and the button stops working. 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
<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>
2 answers
solution1
0 2018-07-30 21:57:29
You can not create an element with 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.
<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>
solution2
0 ACCPTED 2018-07-30 22:06:44
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 .
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.