如何获取所选单选按钮的值并将其传递给另一个变量？

Question

I'm learning JS/HTML/CSS and need some help with a project. I'm trying to create 4 buttons, and when one is selected, I want its text value to be saved to a variable that I can then use later on down the page. I'm mostly not sure how to write a function that determines which button was collected and then saves the value to a variable (ie 1 room, 2 rooms)

    <button id = "numberrooms1" onclick="myFunction()">1 room</button>
    <button id = "numberrooms2" onclick="myFunction()">2 rooms</button>
    <button id = "numberrooms3" onclick="myFunction()">3 rooms</button>
    <button id = "numberrooms4" onclick="myFunction()">4 rooms</button>

<script type="text/javascript">
      var x = document.getElementById("numberrooms1").textContent;    
</script>

Later on I want to reference the variable here...

<script type="text/javascript">
        var myFunction8 = function(){
             document.getElementById('response').innerHTML = ("My name    is " + yourName + " and I'm subletting my " + x + " bedroom apartment.")
        };
        </script>

Answer 1

Add a class to the buttons and you can set all the handlers in one place:

<button class="numberrooms" id="numberrooms1">1 room</button>
<button class="numberrooms" id="numberrooms2">2 rooms</button>
<button class="numberrooms" id="numberrooms3">3 rooms</button>
<button class="numberrooms" id="numberrooms4">4 rooms</button>

var buttons = document.getElementsByClassName('numberrooms');

for ( var i = 0; i < buttons.length; ++i )
  buttons[i].addEventListener('click', myFunction);

Then, in myFunction() , use this to get the button that was clicked, and get the innerHTML from that:

var x;

function myFunction(){
  x = this.innerHTML;
}

 var buttons = document.getElementsByClassName('numberrooms'); for (var i = 0; i < buttons.length; ++i) buttons[i].addEventListener('click', myFunction); var x; function myFunction() { x = this.innerHTML; document.getElementById('response').innerHTML = x; } 

 <button class="numberrooms" id="numberrooms1">1 room</button> <button class="numberrooms" id="numberrooms2">2 rooms</button> <button class="numberrooms" id="numberrooms3">3 rooms</button> <button class="numberrooms" id="numberrooms4">4 rooms</button> <p id="response"></p> 

Answer 2

So the first thing you will want to do is add a value tag to your buttons.

<button id = "numberrooms1" onclick="myFunction()" value="1">1 room</button>
<button id = "numberrooms2" onclick="myFunction()" value="2">2 rooms</button>

The Second thing you will want to do is declare a variable within your script tag.

<script type="text/javascript">
    var rooms;
    var myFunction8 = function(){
         document.getElementById('response').innerHTML = ("My name    is " + yourName + " and I'm subletting my " + x + " bedroom apartment.")
    };
    </script>

Then you will create your onclick function which will set the variable to your desired value.

var myOnclickFunction = function(button){
  rooms = button.value;
};

You will also want to call your onclick function using this.

<button id = "numberrooms1" onclick="myOnclickFunction(this)" value="1">1 room</button>
<button id = "numberrooms2" onclick="myOnclickFunction(this)" value="2">2 rooms</button>