Question

我遇到的情况是用户可能会插入Total Quantity以及Total Pass和Total Fail。我创建了一个函数，当插入Total Pass的数量时，循环（输入通过分数）将根据输入的迭代运行。

但是，我不想让循环在JavaScript函数中显示行Enter The Score :。因此，我希望函数从HTML本身调用div。

例如，我希望在<div id="outputPass"><p>Enter the score : <input type="text" /></p></div>中创建的循环函数中调用document.getElementById('btnPass').onclick = function()。

我在代码部分插入了一些注释。

＆＃13;

document.getElementById('btnPass').onclick = function() {
  var totalIterations = parseInt(document.getElementById('inputPass').value);
  var output = document.getElementById('outputPass');
  var quantity = document.getElementById('quantity').value;
  output.innerHTML = '';

  if (quantity < totalIterations) {
    alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
  } else {
    for (var i = 1; i <= totalIterations; i++) {
      var item = document.createElement('div');
      //Call <div> from HTML 
      item.innerHTML = "";
      output.appendChild(item);
    }
  }
};

document.getElementById('btnFail').onclick = function() {
  var totalIterations = parseInt(document.getElementById('inputFail').value);
  var output = document.getElementById('outputFail');
  var quantity = document.getElementById('quantity').value;
  output.innerHTML = '';

  if (quantity < totalIterations) {
    alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
  } else {
    for (var i = 1; i <= totalIterations; i++) {
      var item = document.createElement('div');
      //Call <div> from HTML
      item.innerHTML = "";
      output.appendChild(item);
    }
  }
};

function togglePass() {
  var x = document.getElementById("passDiv");

  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function toggleFail() {

  var y = document.getElementById("failDiv");

  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }
}

＆＃13;

.display {
  display: none;
}

＆＃13;

<form method="post" name="form">
  <p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />

  <input type="button" value="Pass" onclick="togglePass()">
  <input type="button" value="Fail" onclick="toggleFail()">

  <div id="passDiv" class="display">
    <p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" />&nbsp<input type="button" value="Key In Score" id="btnPass" onclick="return validate();"></p><br />
    <!--This Div-->
    <div id="outputPass">
      <p>Enter the score : <input type="text" /></p>
    </div>
    <br />
    <input type="button" value="DONE">
  </div>
  <br />

  <div id="failDiv" class="display">
    <p>Enter Total Fail : <input type="text" id="inputFail" />&nbsp<input type="button" value="Key In Score" id="btnFail"></p><br />
    <!--This Div-->
    <div id="outputFail">
      <p>Enter the score : <input type="text" /></p>
    </div>
    <br />
    <input type="button" value="DONE">
  </div>

</form>

＆＃13;

Answer 1

您可以进行以下更改以实现您的目标：

最初，我们会将{pscore / fscore（分别为传递和失败）的ID提供给<p></p>标记并隐藏它们。

<p id="fscore" style="display:none">Enter the score : <input type="text" /></p>

我们分别以变量pscore和fscore的形式在javascript代码中访问它们。（确保它们在全球范围内声明）

var pscore = document.getElementById('pscore'); var fscore = document.getElementById('fscore');
然后在迭代中我们可以创建pscore / fscore的克隆，将pscore / fscore的类提供给<p></p>标记和删除pscore /得分的ID （以避免重复的ID），将显示更改为阻止并将附加到使用以下内容输出容器：

var cln = pscore.cloneNode(true); cln.style.display="block"; cln.className ="pscore"; cln.removeAttribute("id"); item.appendChild(cln);

var cln = fscore.cloneNode(true); cln.style.display="block"; cln.removeAttribute("id"); cln.className ="fscore"; item.appendChild(cln);

＆＃13;

var pscore = document.getElementById('pscore');
var fscore = document.getElementById('fscore');
document.getElementById('btnPass').onclick = function() {
  var totalIterations = parseInt(document.getElementById('inputPass').value);
  var output = document.getElementById('outputPass');
  var quantity = document.getElementById('quantity').value;
  output.innerHTML = '';

  if (quantity < totalIterations) {
    alert("Invalid Input, Pass Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
  } else {
    for (var i = 1; i <= totalIterations; i++) {
      var item = document.createElement('div');
      //Call <div> from HTML
      var cln = pscore.cloneNode(true);
      cln.style.display = "block";
      cln.className = "pscore";
      cln.removeAttribute("id");
      item.appendChild(cln);
      output.appendChild(item);
    }
  }
};

document.getElementById('btnFail').onclick = function() {
  var totalIterations = parseInt(document.getElementById('inputFail').value);
  var output = document.getElementById('outputFail');
  var quantity = document.getElementById('quantity').value;
  output.innerHTML = '';

  if (quantity < totalIterations) {
    alert("Invalid Input, Fail Value(" + totalIterations + ") Bigger than Quantity(" + quantity + ")");
  } else {
    for (var i = 1; i <= totalIterations; i++) {
      var item = document.createElement('div');
      //Call <div> from HTML
      var cln = fscore.cloneNode(true);
      cln.style.display = "block";
      cln.className = "fscore";
      cln.removeAttribute("id");
      item.appendChild(cln);
      output.appendChild(item);
    }
  }
};

function togglePass() {
  var x = document.getElementById("passDiv");

  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function toggleFail() {

  var y = document.getElementById("failDiv");

  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }
}

＆＃13;

.display {
  display: none;
}

＆＃13;

<form method="post" name="form">
  <p>Enter the quantity : <input type="text" id="quantity" name="quantity" /></p><br />

  <input type="button" value="Pass" onclick="togglePass()">
  <input type="button" value="Fail" onclick="toggleFail()">

  <div id="passDiv" class="display">
    <p>Enter Total Pass : <input type="text" id="inputPass" name="inputPass" />&nbsp;<input type="button" value="Key In Score" id="btnPass"></p><br />
    <!--This Div-->
    <div id="outputPass">
      <p id="pscore" style="display:none">Enter the score : <input type="text" /></p>
    </div>
    <br />
    <input type="button" value="DONE">
  </div>
  <br />

  <div id="failDiv" class="display">
    <p>Enter Total Fail : <input type="text" id="inputFail" />&nbsp;<input type="button" value="Key In Score" id="btnFail"></p><br />
    <!--This Div-->
    <div id="outputFail">
      <p id="fscore" style="display:none">Enter the score : <input type="text" /></p>
    </div>
    <br />
    <input type="button" value="DONE">
  </div>

</form>

＆＃13;

HTML，JS - 通过调用<div>从HTML到JS显示循环的输出

1 个答案: