Javascript not placing code in ID div
Question
I recently posted about a beginners issue in Javascript where I was writing a program to paste the text in an input form. Now I am trying to get the program to place the text in a specific div element so that the form does not disappear. I am new to this and do not know what I am doing wrong, so if you can help that would be great. The purpose of my program is supposed to be to write code for me based off an input.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>YAML Generator</title> </head> <body> <form class="yamlform" action="index.html" method="post"> <input type="text" name="appname" value="Name"> <button type="submit" onclick="writeAppName()">Submit</button> </form> <div id="appnameSpace"> </div> <script type="text/javascript"> var appnamelocation = document.getElementById('appnameSpace') function writeAppName() { var appname = document.getElementsByName("appname")[0].value document.getElementById(appnameSpace) document.write(appname) } </script> </body> </html>
5 answers
solution1
1 2017-05-01 15:40:35
function writeAppName() {
var appname = document.getElementsByName("appname")[0].value;
document.getElementById('appnameSpace').innerHTML = '<h1>'+appname+'</h1>';
}
solution2
1 2017-05-01 15:44:51
Try this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YAML Generator</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#appnameSpace").html($("#appname").val());
});
});
</script>
</head>
<body>
<input type="text" id="appname" name="appname" value="Name">
<button type="submit" id="btn">Submit</button>
<div id="appnameSpace">
</div>
</body>
</html>
solution3
1 ACCPTED 2017-05-01 15:44:58
There are few issues. Specially using the form tag with a submit button, you will submit data to the server. No need of submit data in this case. Here the final code.
HTML
<body>
<input type="text" id="appname" value="Name">
<button onclick="writeAppName()">Submit</button>
<div id="appnameSpace">
</div>
</body>
JS
var appnamelocation = document.getElementById('appnameSpace');
function writeAppName() {
var appname = document.getElementById('appname').value;
var appnameSpaceElement = document.getElementById('appnameSpace');
appnameSpaceElement.innerHTML = appname;
}
Here the working example:
Your final code should be the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YAML Generator</title>
</head>
<body>
<input type="text" id="appname" value="Name">
<button onclick="writeAppName()">Submit</button>
<div id="appnameSpace">
</div>
<script type="text/javascript">
var appnamelocation = document.getElementById('appnameSpace');
function writeAppName() {
var appname = document.getElementById('appname').value;
var appnameSpaceElement = document.getElementById('appnameSpace');
appnameSpaceElement.innerHTML = appname;
}
</script>
</body>
</html>
solution4
1 2017-05-01 15:45:47
Replace the document.write with appnamelocation.innerHTML:
appnamelocation.innerHTML = appname
solution5
1 2017-05-01 15:51:33
I would change this to a submit event handler for the form so that the "enter" key can submit, too. Then you just need to reference your variables a little differently and use innerHTML instead of document.write to populate your div.
<html> <head> <meta charset="utf-8"> <title>YAML Generator</title> </head> <body> <form class="yamlform" action="index.html" method="post" onsubmit="return writeAppName()"> <input type="text" name="appname" value="Name"> <button type="submit" >Submit</button> </form> <div id="appnameSpace"> </div> <script type="text/javascript"> function writeAppName() { var appname = document.getElementsByName("appname")[0].value, appnamelocation = document.getElementById("appnameSpace"); appnamelocation.innerHTML = appname; return false; } </script> </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.