Question

当我在文本区域中编辑表单的输出时，表单的重置和提交按钮不起作用。我创建了一个基于用户输入输出自定义句子的表单。如果我不编辑文本区域，则这些按钮可以正常工作，可以重新设置或重新提交onclick。但是，如果我编辑文本区域，则会抓住所有功能。有任何想法吗？谢谢！ <3

<!DOCTYPE html>
<html>
<head>
  <title>Experiment</title>

  <style type="text/css">
    table,td,th{
      margin-left: auto;margin-right: auto
    }
    .display{
      display: flex;align-items: center;justify-content: center;
    }
    p{
      text-align: center;
    }
    textarea{
      display: block;margin-left:auto;margin-right: auto;
    }
  </style>

  <script type="text/javascript">

  function sentence(){
    document.getElementById("s1").style.display= 'block';
    document.getElementById("r1").style.display= 'block';
  {
  if(document.getElementById("z1").value==""){
    alert("Hi! Your dog's name is required for submission.")
    document.getElementById("z1").focus();
  }else if(document.getElementById("z2").value==""){
    alert("Hi! Your dog's gender is required for submission.")
  }else if(document.getElementById("z3").value==""){
    alert("Hi! Your dog's size is required for submission.")
  }else{
    const input1 = document.getElementById("z1").value
    const input2 = document.getElementById("z2").value
    const input3 = document.getElementById("z3").value
    document.getElementById("s1").innerHTML="My dog's name is " + input1 + ". " + input2 + " loves to play fetch. My dog is " + input3 + ".";
  }

  }
  }

  function reset(){
    document.getElementById("s1").innerHTML="";
  }

  function hide(){
    document.getElementById("s1").style.display= 'none';
    document.getElementById("r1").style.display= 'none';
  }
</script>

</head>
<body onload="hide()">

<table>
  <tr>
    <td> <input type="text" id="z1" placeholder="Your Dog's Name" name="name" maxlength="100"></td>
    <td> <select name="gender" id="z2"> <option value="" disabled selected>Select your dog's gender.</option> <option value="He">He</option> <option value="She">She</option> </select></td>
    <td> <select name="size" id="z3"> <option value="" disabled selected>Select your dog's size.</option> <option value="big">big</option> <option value="medium in size">medium</option> <option value="small in size">small</option> </select></td>
</table>
<br>
<div class="display">
  <button onclick="sentence()"> Submit </button>
</div>
<hr>
<br>
<textarea rows="10" cols="100" id="s1"></textarea>
<br>

<div class="display">
  <button onclick="reset()" id="r1">Reset</button>
</div>

</body>
</html>

Answer 1

读取/写入文本区域的正确方法是使用value属性，而不是innerHTML。阅读HTMLTextAreaElement Reference

下面的代码有效，

function sentence() {
  document.getElementById("s1").value = "";// reset
  document.getElementById("s1").style.display = "block";
  document.getElementById("r1").style.display = "block";
  if (document.getElementById("z1").value == "") {
    alert("Hi! Your dog's name is required for submission.");
    document.getElementById("z1").focus();
  } else if (document.getElementById("z2").value == "") {
    alert("Hi! Your dog's gender is required for submission.");
  } else if (document.getElementById("z3").value == "") {
    alert("Hi! Your dog's size is required for submission.");
  } else {
    const input1 = document.getElementById("z1").value;
    const input2 = document.getElementById("z2").value;
    const input3 = document.getElementById("z3").value;
    document.getElementById("s1").value =
      "My dog's name is " +
      input1 +
      ". " +
      input2 +
      " loves to play fetch. My dog is " +
      input3 +
      ".";

  }
}

function reset() {
  document.getElementById("s1").value = "";
}

function hide() {
  document.getElementById("s1").style.display = "none";
  document.getElementById("r1").style.display = "none";
}

table,td,th {margin-left: auto;margin-right: auto}
  .display {display: flex;align-items: center;justify-content: center;}
  p {text-align: center;}
  textarea {display: block;margin-left:auto;margin-right: auto;}

<body onload="hide()">
  <table>
    <tr>
      <td> <input type="text" id="z1" placeholder="Your Dog's Name" name="name" maxlength="100"></td>
      <td> <select name="gender" id="z2"> <option value="" disabled selected>Select your dog's gender.</option> <option value="He">He</option> <option value="She">She</option> </select></td>
      <td> <select name="size" id="z3"> <option value="" disabled selected>Select your dog's size.</option> <option value="big">big</option> <option value="medium in size">medium</option> <option value="small in size">small</option> </select></td>
  </table>
  <br>
  <div class="display">
    <button onclick="sentence()"> Submit </button>
  </div>
  <hr>
  <br>
  <textarea rows="10" cols="100" id="s1">

</textarea>
  <br>

  <div class="display">
    <button onclick="reset()" id="r1">Reset</button>
  </div>

</body>

用户修改了文本区域后，“重置/提交”按钮将不起作用吗？

1 个答案: