Javascript Html Event handling
Question
When I use this code, I am unable to get it to display the data upon clicking the display button. The code is supposed to save the input upon clicking the next button and display the array upon clicking display and clear the array when clicking clear. How do I go about resolving this? Whenever I click the buttons nothing happens. I want to display the array inside the text area.
<html> <head> <script language = "javascript"> var full_name; var dob; var gender; var memberList= new Array(); function saveMember() { // getElementById may only be used to get one item at a time // store the .value in the variable full_name = document.getElementById('full_name').value; dob = document.getElementById('dob').value; gender = document.getElementById('gender').value; // add the values to the array // (when storing the contents of a variable, use the variable name without quotes) memberList.push(full_name, dob, gender); } function displayMembers() { var str = " "; var listLength = memberList.length; // append all the elements in the array into a single string for(var i = 0; i < listLength; i+=3) { str += memberList[i]+", "+memberList[i+1]+", "+memberList[i+2]+"\\n"; } // Replace the contents of the textarea with the value in str document.getElementById("textBox").value = str; } function clearList() { memberList = []; } </script> <title>INTERNET TECHNOLOGIES CLUB MEMBER LIST </title> </head> <body> <form name = "memberForm"> <h1> INTERNET TECHNOLOGIES CLUB MEMBER LIST </h1> Full Name: <input type = "text" id = "full_name" value = ""/> Date of Birth: <input type = "text" id ="dob" value = ""/> <br> Gender: <input type = "text" id = "gender" value = ""/> <br> <textarea id = "textBox" rows = "10" cols = "70"> </textarea> <br> <input type = "button" value = "NEXT" onclick ="saveMember()"></button> <input type = "button" value = "DISPLAY" onclick ="displayMembers()"> </button> <input type = "button" value = "CLEAR" onclick ="clearList()"></button> </form> </body> </html>
2 answers
solution1
0 2016-11-11 05:15:42
your code is working..remove </button> in your html
I thing you expecting like this: declare the array like var memberList= []; .If you click the clear button Array was empty and textarea also empty.If you need only empty with array.remove document.getElementById("textBox").value=""; in clearlist()
var full_name; var dob; var gender; var full_name; var memberList= []; function saveMember() { // getElementById may only be used to get one item at a time // store the .value in the variable full_name = document.getElementById('full_name').value; dob = document.getElementById('dob').value; gender = document.getElementById('gender').value; // add the values to the array // (when storing the contents of a variable, use the variable name without quotes) memberList.push(full_name, dob, gender); } function displayMembers() { var str = " "; var listLength = memberList.length; // append all the elements in the array into a single string for(var i = 0; i < listLength; i+=3) { str += memberList[i]+", "+memberList[i+1]+", "+memberList[i+2]+"\\n"; } document.getElementById("textBox").value = str; } function clearList() { memberList = []; document.getElementById("textBox").value=""; }
<form name = "memberForm"> <h1> INTERNET TECHNOLOGIES CLUB MEMBER LIST </h1> Full Name: <input type = "text" id = "full_name" value = ""/> Date of Birth: <input type = "text" id ="dob" value = ""/> <br> Gender: <input type = "text" id = "gender" value = ""/> <br> <textarea id = "textBox" rows = "10" cols = "70"> </textarea> <br> <input type = "button" value = "NEXT" onclick ="saveMember()"> <input type = "button" value = "DISPLAY" onclick ="displayMembers()"> <input type = "button" value = "CLEAR" onclick ="clearList()"> </form>
solution2
0 2016-11-11 05:22:29
you have written "</button>" as closing tag, which is incorrect syntax for input tag.
<input type = "button" value = "NEXT" onclick ="saveMember()"></button>
<input type = "button" value = "DISPLAY" onclick ="displayMembers()"></button>
<input type = "button" value = "CLEAR" onclick ="clearList()"></button>
replace this with the following and your code will work fine.
<input type = "button" value = "NEXT" onclick ="saveMember()"/>
<input type = "button" value = "DISPLAY" onclick ="displayMembers()"/>
<input type = "button" value = "CLEAR" onclick ="clearList()"/>
also change these functions for proper functioning
function saveMember() {
full_name = document.getElementById('full_name').value;
dob = document.getElementById('dob').value;
gender = document.getElementById('gender').value;
memberList.push(full_name, dob, gender);
document.getElementById('full_name').value = "";
document.getElementById('dob').value = "";
document.getElementById('gender').value = "";
}
function clearList() {
memberList = [];
document.getElementById("textBox").value = str;
}
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.