Javascript Html事件处理

问题描述：

当我使用这段代码时，单击显示按钮时无法显示数据。代码应该在点击下一个按钮时保存输入，并在点击显示时显示数组，并在点击清除时清除数组。我该如何解决这个问题？每当我点击按钮什么都没有发生。我想在文本区域内显示数组。Javascript Html事件处理

 <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>

答

你的代码是在HTML working..remove </button>

我你期待这样的事情：。如果你点击清除按钮数组是空的声明像var memberList= [];数组并且textarea也是空的。如果你只需要清空array.remove document.getElementById("textBox").value="";明确列表（）

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>

答

你写"</button>"为关闭标签，这是输入标签不正确的语法。

<input type = "button" value = "NEXT" onclick ="saveMember()"></button> 
<input type = "button" value = "DISPLAY" onclick ="displayMembers()"></button> 
<input type = "button" value = "CLEAR" onclick ="clearList()"></button>

用下面的代码替换它，你的代码将正常工作。

<input type = "button" value = "NEXT" onclick ="saveMember()"/> 
<input type = "button" value = "DISPLAY" onclick ="displayMembers()"/> 
<input type = "button" value = "CLEAR" onclick ="clearList()"/>

也更改这些功能正常运作

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; 
    }

Javascript Html事件处理

相关推荐