Question

我有一个HTML形式的语言测验，当用户检查其输入内容时，反馈以对勾或十字图标的形式插入到单元格中。我的问题是，无论是回答还是检查了第一个或第二个问题，反馈总是插入到第一个td中。问题和适当的答案与elementNo相关联：我不知道如何将“标记”单元格与其答案和问题相关联

<SCRIPT>

//Define the answers. 
Answer = new Array( "Die Maus ist weiss.", "",     
                    "Auf Wiedersehen!");              

//inserts icon, however only in the first element named "mark".
// Somehow needs to select correct place according to element number

function itemfeedback (elementNo)
      {
       if (document.E1a.elements[elementNo].value == "")
        {
        alert("You must type an answer!");
        }

        else if (document.E1a.elements[elementNo].value == Answer[elementNo])
        {
          document.getElementById("mark").innerHTML = "<img src='correct.jpg'>";
        }
          else
          {
            document.getElementById("mark").innerHTML = "<img src='incorrect.jpg'>";
          }
      }

</SCRIPT>
</HEAD>
<BODY>

    <FORM NAME="E1a" accept-charset="ISO-8859-1" onReset="return confirm('Clear entries? Are you sure?')">

  <HR>
  <H3>
  translate, remembering punctuation and capitalisation...
  </H3>
  <table>
  <tr>
  <td>1. The mouse is white.</td>
  <td><INPUT TYPE="TEXT" NAME="Q1" SIZE=50 MAXLENGTH=50></td>
  <td><INPUT TYPE="button" id ="check_button" VALUE="check..." NAME="B1" onClick="itemfeedback(0)"></td>
  <td id="mark"></td>
  </tr>
  <tr>
  <td>2. Good-bye!</td>
  <td><INPUT TYPE="TEXT" NAME="Q2" SIZE=50 MAXLENGTH=50></td> 
  <td><INPUT TYPE="button"id ="check_button"  VALUE="check..." NAME="B2" onClick="itemfeedback(2)"></td>
  <td id="mark"></td>
  </tr>
  </table>
  <hr>

  <INPUT TYPE="RESET" id ="reset_fields" VALUE="Clear Entries">

  </CENTER>

  </FORM>

</BODY>
</HTML>

我希望我的问题很清楚，希望有人能帮忙。

Answer 1

快速解答

根据{{3}}，

ID在HTML文档中应唯一。因此，JavaScript的“ getElementById”函数将忽略首次出现后的ID的所有实例。选择多个DOM元素的一种更合适的方法是使用“ class”属性，如下所示：

<td class="mark"></td>
...
<td class="mark"></td>

并使用JavaScript使用“ getElementsByClassName”引用它

document.getElementsByClassName('mark')

更多有用的答案

我会提出更多建议，以使您的代码更具动态性和功能性。我在下面的代码中插入了注释，以解释我的更改/建议。

<html>
<head>
  <script>

  // We will use an object instead of an array, so that we can reference the answers by a string, rather then an integer.  
  // Also, any time a NEW variable is defined, it should be prefaced with "let" or "const" for >= ES2015, or "var" for < ES2015 (see https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c for details on the different script versions)
  const answer = {
    Q1: "Die Maus ist weiss.",
    Q2: "Auf Wiedersehen!"
  };

  // itemfeedback function is now passing the input id, rather than the index
  function itemfeedback (id) {
    // This will get the input, associated with the button
    let input  = document.getElementById(id),
    // This will be the ID of the mark element that is associated with the submitted input
        markId = "mark" + id,
    // This is the mark element assocaited with the submitted input
        mark   = document.getElementById(markId);

    if (input.value == "") {
      alert("You must type an answer!");
    } 
    // Since we have assigned the answers to an object, and gave each of the answers indexes to match the input ids, we can find the answer by that
    else if (input.value == answer[id]){
      mark.innerHTML = "<img src='correct.jpg'>";
    } else {
      mark.innerHTML = "<img src='incorrect.jpg'>";
    }
  }

  </script>
</head>
<body>

  <form NAME="E1a" accept-charset="ISO-8859-1" onReset="return confirm('Clear entries? Are you sure?')">

    <HR>
    <H3>
      translate, remembering punctuation and capitalisation...
    </H3>
    <table>
      <tr>
        <td>1. The mouse is white.</td>
        <!-- Gave input ID of "Q1" -->
        <td><input TYPE="TEXT" NAME="Q1" SIZE=50 MAXLENGTH=50 id="Q1"></td>
        <!-- Changed id to class, since it is non-unique -->
        <td><input TYPE="button" class="check_button" value="check..." NAME="B1" onClick="itemfeedback('Q1')"></td>
        <!-- We will give this an ID that can be associated with it's related inputs name attribute -->
        <td id="markQ1"></td>
      </tr>
      <tr>
        <td>2. Good-bye!</td>
        <!-- Gave input ID of "Q2" -->
        <td><input TYPE="TEXT" NAME="Q2" SIZE=50 MAXLENGTH=50 id="Q2"></td> 
        <!-- Passed ID to onChange handler, instead of index.  Also hanged id to class, since it is non-unique -->
        <td><input TYPE="button" class="check_button"  value="check..." NAME="B2" onClick="itemfeedback('Q2')"></td>
        <!-- We will give this an ID that can be associated with it's related inputs name attribute -->
        <td id="markQ2"></td>
      </tr>
    </table>
    <hr>

    <input TYPE="RESET" id="reset_fields" value="Clear Entries">

  </center>

</form>

</body>
</html>

编辑表单重置

放置此函数以从表单onReset中删除图像：

<!-- We are now calling a function to be executed, and the returned value of the function will determine if the form itself is cleared.  A negative blue will not, a positive value will -->
<form NAME="E1a" accept-charset="ISO-8859-1" onReset="return clearForm(this)">

function clearForm (form) { 
    // Get option that is pressed
    var clear = confirm('Clear entries? Are you sure?');
    // If positive option is clicked, the form will be reset
    if (clear) {
      // This will select all images within the document
      var markImgs = document.getElementsByTagName('img');
      // Iterates through each image, and removes it from the dom     
      while (markImgs[0]) markImgs[0].parentNode.removeChild(markImgs[0])
    }

    return clear;
}

HTML表单javascript关联问题，答案和反馈

1 个答案:

快速解答

更多有用的答案

编辑表单重置