Javascript prompt message query-CodePudding

I tried writing a code for the above image forming a question and list of options with radio button. If user selects the correct answer the message should display as " answer : correct " and " answer : incorrect " for wrong answer i tried until this and if user doesn't select any option and clicks on submit button it should display message as "please select any option". I tried writing code for that like this in html and javascript but i am not getting output. Can anyone help me with this

Output image

function answer() {
  var ans = document.getElementById("ans3")
  var status1 = ans.checked
  var btn2 = document.getElementById("button1")

  if (status1 == true) {
    document.getElementById("lab").innerHTML = "answer : correct"
  } else {
    document.getElementById("lab").innerHTML = "answer : incorrect "
  }
}


function disp() {
  var click = document.getElementById("button1").value
  if (click == "") {
    document.getElementById("lab2").innerHTML = "answer: please select any option"
  }
}
disp()

<form>
  <center>
    <div style="background-color:slateblue; width:70%; height:530px;">
      <br></br>
      <input placeholder="enter email" type="text" id="finp" onkeyup="dis()"></input>
      <br></br>
      <input placeholder="enter password" disabled type="password" id="sinp" onkeyup="dis1()"></input>
      <br></br>
      <input type="button" value="Login" disabled id="btn"></input>
      <br></br>
      <hr></hr>
      <h2 style="color:white;"> In which tag &ltScript&gt tag should be specified ?</h2>
      <br></br>
      <input type="radio" name="abc" id="ans1"> <strong style="color:white;">&ltHead&gt </strong></input>
      <br></br>
      <input type="radio" name="abc"><strong style="color:white;"> &ltBody&gt </strong></input>
      <br></br>
      <input type="radio" name="abc" id="ans3"> <strong style="color:white;">Both &ltBody&gt and &ltHead&gt </strong></input>
      <br></br>
      <input type="radio" name="abc"><strong style="color:white;"> None of the above</strong> </input>
      <br></br>
      <strong style="color:white;" id="lab">answer : </strong>
      <strong style="color:white;" id="lab2"></strong>
      <br></br>
      <input type="button" value="submit" id="button1" onclick="answer()"></input>
    </div>
  </center>
</form>

CodePudding user response：

You can use the Form API to check if there is a selected value for any elements with the name set to abc. If it is an empty string, then there is nothing selected.

Also, I do not recommend giving radio buttons IDs, because they are grouped together by name anyways. Instead, give the correct radio button an attribute such as data-correct. Then, just map through them and see if the selected one is correct or not based on its presence.

const form = document.forms.question;
var btn2 = document.getElementById('button1');
const lab2 = document.querySelector('#lab');

function answer() {
    const isAnswered = form.elements.abc.value !== '';
    const isCorrect = !![...form.elements.abc].find((radio) => radio.checked && radio.hasAttribute('data-correct'));
    const text = !isAnswered ? 'Please select an answer' : `${isCorrect ? 'Correct' : 'Incorrect'}`;

    lab.textContent = text
}

function disp() {
    var click = document.getElementById('button1').value;
    if (click == '') {
        document.getElementById('lab2').innerHTML = 'answer: please select any option';
    }
}
disp();

<form id="question">
    <div style="background-color:slateblue; width:70%; height:530px;">
    <br></br>
    <input placeholder="enter email" type="text" id="finp" onkeyup="dis()"></input>
    <br></br>
    <input placeholder="enter password" disabled type="password" id="sinp" onkeyup="dis1()"></input>
    <br></br>
    <input type="button" value="Login" disabled id="btn"></input>
    <br></br>
    <hr></hr>
    <h2 style="color:white;"> In which tag &ltScript&gt tag should be specified ?</h2>
    <br></br>
    <input type="radio" name="abc"><strong style="color:white;">&ltHead&gt </strong></input>
    <br></br>
    <input type="radio" name="abc"><strong style="color:white;"> &ltBody&gt </strong></input>
    <br></br>
    <input type="radio" name="abc" data-correct> <strong style="color:white;">Both &ltBody&gt and &ltHead&gt </strong></input>
    <br></br>
    <input type="radio" name="abc"><strong style="color:white;"> None of the above</strong> </input>
    <br></br>
    <strong style="color:white;" id="lab">answer : </strong>
    <strong style="color:white;" id="lab2"></strong>
    <br></br>
    <input type="button" value="submit" id="button1" onclick="answer()"></input>
    </div>
</form>

CodePudding user response：

several little things to change to make running your code :

first in the disp function you do var click = document.getElementById("button1").value you will get the value of the button and not the fact if form have been reply or not -> for this part i can propose you to store form state in a variable (in my sample i just declare status1 as a global variable)
then i advice you to use innerText when you just change text inside div
last point in the answer method you modify lab div but you stored your reply in lab2i just change the selector

var status1;
function answer() {
  var ans = document.getElementById("ans3")
  status1 = ans.checked;
  var btn2 = document.getElementById("button1")

  if (status1 == true) {
    document.getElementById("lab2").innerText = "correct"
  } else {
    document.getElementById("lab2").innerText = "incorrect "
  }
}


function disp() {
  if (!status1) {
    document.getElementById("lab2").innerText = "please select any option"
  }
}
disp()

<form>
  <center>
    <div style="background-color:slateblue; width:70%; height:530px;">
      <br></br>
      <input placeholder="enter email" type="text" id="finp" onkeyup="dis()"></input>
      <br></br>
      <input placeholder="enter password" disabled type="password" id="sinp" onkeyup="dis1()"></input>
      <br></br>
      <input type="button" value="Login" disabled id="btn"></input>
      <br></br>
      <hr></hr>
      <h2 style="color:white;"> In which tag &ltScript&gt tag should be specified ?</h2>
      <br></br>
      <input type="radio" name="abc" id="ans1"> <strong style="color:white;">&ltHead&gt </strong></input>
      <br></br>
      <input type="radio" name="abc"><strong style="color:white;"> &ltBody&gt </strong></input>
      <br></br>
      <input type="radio" name="abc" id="ans3"> <strong style="color:white;">Both &ltBody&gt and &ltHead&gt </strong></input>
      <br></br>
      <input type="radio" name="abc"><strong style="color:white;"> None of the above</strong> </input>
      <br></br>
      <strong style="color:white;" id="lab">answer : </strong>
      <strong style="color:white;" id="lab2"></strong>
      <br></br>
      <input type="button" value="submit" id="button1" onclick="answer()"></input>
    </div>
  </center>
</form>