javascript - 根据用户输入在网页上显示内容

Question

我向用户提出了一系列问题。根据用户的回答，他/她将看到另一个问题或一些文本。例如，这是我的代码(简化):

function layerOne() {
  var radioNo = document.getElementById("radno");
  var radioYes = document.getElementById("radyes");
  var text = document.getElementById("layer-one-yes");

  // Display 2nd question
  if (radioNo.checked == true) {
    radioYes.disabled = true;
  }
  // Deny access
  if (radioYes.checked == true) {
    radioNo.disabled = true;
    text.style.display = "block";
  }
}

#layer-one-yes {
display: none;
}

 <!-- First question -->
 <div id="layer-one">
  <p>Are you under 18?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>
  
  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>

  <!-- Display this if user answers YES -->
  <p id="layer-one-yes">Unfortunately, you cannot get access to desired files!</p>
 </div>

我希望你能明白。但我的网站上有不少这样的功能。我想知道这是否是正确的做法。或者有更有效、更正确的方法吗？

Answer 1

根据当前的方法，只需重复此操作，但对于包含下一个问题的 Div 即可。就效率而言，显然还有很多其他方法可以做到这一点，但这实际上取决于解释和经验。如果您现在对这种技术最满意，请完成它，然后尝试一些其他技术并感受一下。

您可以创建单独的函数，这些函数也会根据用户的响应来插入用户，而不是“注入(inject)”到显示属性，您可以创建两个适当标题为 hide 和 的类show 并根据响应替换适当容器的类。这就是我通常自己获得这些结果的方式，但这都是我的偏好。

这是 CodePen:https://codepen.io/codespent/pen/bKXdGb

function layerOne() {
  var radioNo = document.getElementById("radno");
  var radioYes = document.getElementById("radyes");
  var text = document.getElementById("layer-one-yes");
  var element = document.getElementById("layer-two");

  // Display 2nd question
  if (radioNo.checked == true) {
    radioYes.disabled = true;
    element.style.display = "block";
  }
  // Deny access
  if (radioYes.checked == true) {
    radioNo.disabled = true;
    text.style.display = "block";
  }
}

#layer-one-yes {
  display: none;
}

#layer-two {
  display: none;
}

.show {
  display: block;
}

<!-- First question -->
<div id="layer-one">
  <p>Are you under 18?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>

  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>

  <!-- Display this if user answers YES -->
  <p id="layer-one-yes">Unfortunately, you cannot get access to desired files!</p>
</div>

<div id="layer-two">
  <p>Are you under 21?</p>
  <input type="radio" id="radno" onclick="layerOne()"><label for="radno">No</label>

  <input type="radio" id="radyes" onclick="layerOne()"><label for="radyes">Yes</label>
</div>