Выходное сообщение JS, напечатанное на теге div в форме - PullRequest
Новая
       12

Выходное сообщение JS, напечатанное на теге div в форме

0 голосов
/ 08 мая 2018

Я борюсь с чем-то довольно простым, я думаю. У меня есть форма, и когда пользователь выбирает их ответы, я предполагаю, что в теге DIV появляется сообщение.

мой пример кода здесь: 

    function check(){
 		//var display_answer = document.myform.answer.value;
    
    var q1 = document.myform.q1.value;
    var q2 = document.myform.q2.value;
    
    if(q1 == "a" && q2 == "a"){
  	document.getElementById("div").innerHTML= "Green!";
    }
    if(q1 == "a" && q2 == "b"){
    		document.getElementById("div").innerHTML = "Red!";
    }
    if(q1 == "b" && q2 == "a"){
    		document.getElementById("div").innerHTML = "Yellow!";
    }
    if(q1 == "b" && q2 == "b"){
    document.getElementById("div").innerHTML = "Blue!";
    }
}
    <!DOCTYPE html>
    <html>
    <head>
    <title>Food Quiz</title>
    </head>
    <body>
    <form name="myform">
    Question 1: Question...?
    <input type="radio" name="q1" value="a"> Answer A </br>
    <input type="radio" name="q1" value="b"> Answer B </br></br>
    
    
    Question 2: Question...?
    <input type="radio" name="q2" value="a"> Answer A </br>
    <input type="radio" name="q2" value="b"> Answer B </br></br>
    </br>
    </br>
    </br>
    </br>
    <input type="button" value="submit" onclick="check()">
    </br>
    </br>
    </form>
    
    <p>
    Results:
    </p>
    </br>
    <div style="background-color:lightblue" id="div" name="answer">
    </div>
    
    
    </body>
    </html>

Правда в том, что я не получаю никаких результатов. Когда пользователь выбирает комбинацию из 2-х заданных ответов (по одному на каждый вопрос), он получает цветной результат, напечатанный на теге DIV с id = div.

Есть идеи, что здесь пошло не так? Спасибо.

1 Ответ

0 голосов
/ 08 мая 2018

Я немного изменил ваш фрагмент кода, и это работает.По сути, я добавил method="post" в форму.Я изменил тип кнопки отправки на type="submit".Вот хороший ресурс для HTML Forms .Чтобы предотвратить действия браузера, я изменяю операцию onclick для кнопки отправки onclick="check(); return false;".Вот хороший ресурс для этого: Действия браузера по умолчанию

Я также изменил идентификатор вашего сообщения div на id="resultMessage".Вы обычно хотите уникальный идентификатор.Для фрагмента JavaScript я просто создал одну переменную для ссылки на элемент div и использовал эту переменную в операторах if.

И да, console.log() ваш лучший друг! 

function check() {
  var q1 = document.myform.q1.value;
  var q2 = document.myform.q2.value;
  
  var divResult = document.getElementById("resultMessage");

  if (q1 == "a" && q2 == "a") {
    divResult.innerHTML = "Green!";
  }
  if (q1 == "a" && q2 == "b") {
    divResult.innerHTML = "Red!";
  }
  if (q1 == "b" && q2 == "a") {
    divResult.innerHTML = "Yellow!";
  }
  if (q1 == "b" && q2 == "b") {
    divResult.innerHTML = "Blue!";
  }
}
<!DOCTYPE html>
<html>

  <head>
    <title>Food Quiz</title>
  </head>

  <body>
    <form name="myform" method="post">
      <label for="q1">Question 1: Question...?</label>
      <input type="radio" name="q1" value="a"> Answer A </br>
      <input type="radio" name="q1" value="b"> Answer B </br>
      </br>


      <label for="q2">Question 2: Question...?</label>
      <input type="radio" name="q2" value="a"> Answer A </br>
      <input type="radio" name="q2" value="b"> Answer B </br>
      </br>
      </br>
      </br>
      </br>
      </br>
      <input type="submit" value="submit" onclick="check(); return false;">
      </br>
      </br>
    </form>

    <p>
      Results:
    </p>
    </br>
    <div style="background-color:lightblue" id="resultMessage" name="answer">
    </div>

  </body>

</html>
...