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>

來源

2016-11-11 Bailey Wells

你的代碼是在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>

來源

2016-11-11 05:15:42 prasanth

你寫"</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; 
    }

來源

2016-11-11 05:22:29

Javascript Html事件處理

回答

相關問題