如何在段落中显示我的按钮的值

Question

I'm trying to figure out how to display the value of my button in a paragraph. I feel like this is super simple and I'm just doing something dumb.

<div id="ChestWorkouts" class="text-center">
                    <h1>Chest workouts</h1>
                    <button type="button" class="btn btn-dark" id="0" onclick="Add2list" value="BarBell Bench Press" >BarBell Bench Press</button>
</div>
<div>
   <h5>LIST OF WORKOUTS TO DO</h5>

                    <p id="Workouts2do">
                        
                    </p>
</div>

function Add2list() {
   var x= document.getElementById("0")
    document.getElementById("Workouts2do").innerHTML = x;
}

Answer 1

Add2list is a function, so onclick="Add2list()" and you want the value of the button so var x = document.getElementById("0").value

 function Add2list() { var x = document.getElementById("0").value document.getElementById("Workouts2do").innerHTML = x; }

 <div id="ChestWorkouts" class="text-center"> <h1>Chest workouts</h1> <button type="button" class="btn btn-dark" id="0" onclick="Add2list()" value="BarBell Bench Press">BarBell Bench Press</button> </div> <div> <h5>LIST OF WORKOUTS TO DO</h5> <p id="Workouts2do"> </p> </div>

Answer 2

You haven't added which attribute you want to get from the button. Also, you can't directly add the whole reference.

1. Just mention which attribute you want to take from the button
2. You haven't called the function when passed to onclick attribute

<div id="ChestWorkouts" class="text-center">
                    <h1>Chest workouts</h1>
                    <button type="button" class="btn btn-dark" id="0" onclick="Add2list()" value="BarBell Bench Press" >BarBell Bench Press</button>
</div>
<div>
   <h5>LIST OF WORKOUTS TO DO</h5>

                    <p id="Workouts2do">
                        
                    </p>
</div>

function Add2list() {
    var x= document.getElementById("0").value
    document.getElementById("Workouts2do").innerHTML = x;
}

Answer 3

1. OnClick needs a function always
2. You need to specify what you are going to get from the button

option 1:

  var x = document.getElementById("0").value
  document.getElementById("Workouts2do").innerHTML = x;

option 2:

var x = document.getElementById("0")
document.getElementById("Workouts2do").innerHTML = x.value;

3. if you want to have a list and not clear it every time you need to click on the button you could use +=
4. For new line since it's inner HTML you can use
   only.

 function Add2list() { var x = document.getElementById("0") document.getElementById("Workouts2do").innerHTML += x.value + `<br>`; }

 <div id="ChestWorkouts" class="text-center"> <h1>Chest workouts</h1> <button type="button" class="btn btn-dark" id="0" onclick="Add2list()" value="BarBell Bench Press">BarBell Bench Press</button> </div> <div> <h5>LIST OF WORKOUTS TO DO</h5> <p id="Workouts2do"> </p> </div>

Answer 4

You should probably change your button to "input" but leave it's type at "button". Also, var is no longer used, you should use "let" as so:

  <div id="ChestWorkouts" class="text-center">
    <h1>Chest workouts</h1>
    <input type="button" class="btn btn-dark" id="0" value="BarBell Bench Press" />
  </div>
  <div>
    <h5>LIST OF WORKOUTS TO DO</h5>
    <p id="Workouts2do">
    </p>
  </div>

the js:

document.getElementById("0").addEventListener("click", Add2list);
function Add2list() {

  // Selecting the input and get value 
  let inputVal = document.getElementById("0").value;

  // output the value
  document.getElementById("Workouts2do").innerHTML = inputVal;
  
}