Trouble with innerHTML using Javascript
Question
I am making a form with some fields that a user has to fill out. Once he/she fills it out, hits save, the form disappears and a new div appears with what the user filled out. Unfortunately, I cannot get the data to show in this second div that appears. I am not sure what I'm doing wrong, maybe you can help me? Also, I need to use pure Javascript, not jQuery or anything else.
var firstName = document.getElementById('fname').value; var lastName = document.getElementById('lname').value; var state = document.getElementById('select_state'); var whichState = state.options[state.selectedIndex].text; var parname = document.getElementById('pname'); var form = document.getElementById('form_div'); var edit = document.getElementById('view_div'); if (document.getElementById('m').checked == true) { var Gender = 'Male'; } else { Gender = 'female'; } function showData() { if (form.style.display != 'none') { form.style.display = 'none'; edit.style.display = 'block'; } else { form.style.display = 'block'; } parname.innerHTML = [ firstName.name + " : " + firstName.value + "<hr>", lastName.name + " : " + lastName.value + "<hr>", state.name + " : " + state.options[state.selectedIndex].text + "<hr>" ].join(""); } function editData() { if (edit.style.display != 'none') { edit.style.display = 'none'; form.style.display = 'block'; } else { edit.style.display = 'block'; } }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="form_div"> <form> First Name: <input type="text" name="First Name" id="fname">Last Name: <input type="text" name="Last Name" id="lname"> <input type="radio" name="Gender" id="m" value="male" checked>Male <input type="radio" name="Gender" id="f" value="female">Female <select name="state" id="select_state"> <option value="select">- Please Select -</option> <option value="PA">Pennsylvania</option> <option value="NJ">New Jersey</option> <option value="WI">Wisconsin</option> <option value="WA">Washington</option> </select> </form> <input type="submit" value="Save" onclick="showData();"> </div> <div id="view_div" style="display:none;"> <button id="edit" value="Edit" onclick="editData();"></button> <p id="pname"></p> </div> <body> </html>
4 answers
solution1
0 2015-08-22 15:46:05
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
try this one I think it is working
solution2
0 2015-08-22 15:46:44
try the below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
function showData() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
" First Name : " + firstName + "<hr>",
" Last Name : " + lastName + "<hr>",
" state : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
solution3
0 2015-08-22 15:48:59
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
Problem: you didn't target DOM objects, you have targeted their values, and later in code you try to get properties, like: firstName.name ! Change two lines at the top of your code to this, and everything should work fine.
solution4
0 2015-08-22 16:26:00
One error is the fact that you are getting the values from the elements right after the page is rendered, thus they are all undefined .
You should get them after the save button is pressed. Moving the variable declarations inside the showData function will help that.
Also in your variables you are saving the element.value , thus saving the string entered by the user. Later when creating the text you are trying to insert as HTML you access the value and name properties. That means you are trying to use element.value.value and element.value.name which undefined for strings.
Removing the value property in your variable declaration will give you the element , and later you can just get the value and name properties out of it.
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.