Javascript Html 事件处理答案

【问题标题】：Javascript Html Event handlingJavascript Html 事件处理
【发布时间】：2016-11-11 05:08:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript html arrays events textarea

【解决方案1】：

您的代码正在运行..在您的 html 中删除 </button>

你期待这样的事情：像var memberList= [];一样声明数组。如果你点击清除按钮数组是空的，textarea也是空的。如果你只需要在clearlist()中使用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>

【讨论】：

【解决方案2】：

您将"</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;
  }

【讨论】：