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

ваш код working..remove </button> в вашем HTML

я, что вы ожидали, как это: объявить массив как var memberList= []; .Если вы нажмете кнопку ясно Массив пустовала и textarea также empty.If вам нужно только пустое с array.remove document.getElementById("textBox").value=""; в 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>

источник

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 Обработка событий

ответ

Смежные вопросы