Question

我想设置一个条件来检查用户是否选择了答案。如果用户选择了答案，则显示下一个按钮。一直困扰着试图解决这个问题。

的jsfiddle： source code

我想它会像添加但不确定一样简单。

  if (check if user has selected an answer) {
    document.getElementById('btnNxt').style.display = 'block';
  } else {
    document.getElementById('btnNxt').style.display = 'none';
  }

Answer 1

检查此更新fiddle。您只需在加载问题时添加disabled属性，并在选择答案时删除此属性。

像

这样的东西

  function myAnswer() {
   document.getElementById('btnNxt').removeAttribute("disabled");

和

 btnNxt.onclick = function() {
 buildQuiz(page + 1)
 document.getElementById('btnNxt').setAttribute("disabled", true); 
  };

Answer 2

您可以添加一个事件侦听器，在选择答案时使该按钮可见。 “answerOptions”.addEventListener（'click'，makeNextButtonVisible） Docs

Answer 3

使用CSS隐藏默认的下一个按钮：

#btnNxt{
    display: none
}

然后修改hideShow功能：

function hideshow() {
  if (0 >= page) {
    document.getElementById('btnPre').style.display = 'none';
  } else {
    document.getElementById('btnPre').style.display = 'block';
  }

  if (myObj.length <= page) {
    document.getElementById('btnNxt').style.display = 'none';
    document.getElementById('btnPre').style.display = 'none';
  } else {
    //commented the part below
    //document.getElementById('btnNxt').style.display = 'block';
  }

点击后再次隐藏按钮：

btnNxt.onclick = function() {
  buildQuiz(page + 1)
    document.getElementById('btnNxt').style.display = 'none';
};

然后显示myAnswer功能：

function myAnswer() {
    var btn_next = document.getElementById("btnNxt");
    btn_next.style.display = 'block';
    ...
}

Fiddle here. 但就像这里建议的那样，我会禁用而不是隐藏它。

隐藏下一个按钮，直到选择答案为止[JavaScript]

3 个答案: