Назначить функцию каждому переключателю

Question

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

<form method="post" action="demoform.asp"> 
     <fieldset data-role="controlgroup"> 
     <legend>choose number</legend> 
     <label for="one">number one</label> 
     <input type="radio" id="number" name="1" value="1"> 
     <label for="second">number two</label> 
     <input type="radio" id="number" name="2" value="2"> 
     </fieldset> 
     <p id="demo"></p> 
     <input type="button" id="demo" onclick="myfunction()" >Click me</button> 
    </form> 

и сценарий:

function myfunction() { 
    var place = document.getElementById("number").value; 
    var text; 


    if (place === "1") { 
     text = "Spot Good job!"; 


    } else if (place === "2") { 
     text = " close enough."; 
      } 
document.getElementById("demo").innerHTML = text; 
} 

Answer 1

Если вы хотите, чтобы ваши кнопки радио, чтобы работать как кнопки реального радио, то они должны иметь один и тот же атрибут name. Вы также не можете иметь несколько элементов с тем же атрибутом id. Наконец, ваш HTML имеет синтаксическую ошибку для кнопки.

function myfunction() { 
 
    var place = document.querySelector('input[name="number"]:checked'); 
 
    var text; 
 

 
    if (!place) { 
 
     text = "Select a radio option"; 
 
    } else if (place.value === "1") { 
 
     text = "Spot Good job!"; 
 
    } else if (place.value === "2") { 
 
     text = " close enough."; 
 
    } 
 
    
 
    document.getElementById("demo").innerHTML = text; 
 
}

<form method="post" action="demoform.asp"> 
 
     <fieldset data-role="controlgroup"> 
 
     <legend>choose number</legend> 
 
     <label for="number_1">number one</label> 
 
     <input type="radio" id="number_1" name="number" value="1"> 
 
     <label for="number_2">number two</label> 
 
     <input type="radio" id="number_2" name="number" value="2"> 
 
     </fieldset> 
 
     
 
     <p id="demo"></p> 
 

 
     <button type="button" id="demo" onclick="myfunction()" >Click me</button> 
 
</form>

Answer 2

Ваши радиокнопки должны иметь такое же имя, но и уникальные идентификаторы. Вы можете использовать

<label for="one">number one</label> 
<input type="radio" id="n1" name="number" value="1"> 
<label for="second">number two</label> 
<input type="radio" id="n2" name="number" value="2"> 
<input type="button" id="demo" onclick="myfunction()" >Click me</button> 

с использованием JavaScript:

var text; 
if(document.getElementById("n1").checked) 
    text = "Spot Good job!"; 
if(document.getElementById("n2").checked) 
    text = " close enough."; 
document.getElementById("demo").innerHTML = text;