如何在段落中顯示我的按鈕的值

Question

我試圖弄清楚如何在段落中顯示我的按鈕的值。 我覺得這非常簡單，我只是在做一些愚蠢的事情。

<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 是 function，所以onclick="Add2list()"並且您想要按鈕的值，所以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

您尚未添加要從按鈕獲取的屬性。 此外，您不能直接添加整個參考。

1. 只需提及您要從按鈕中獲取的屬性
2. 傳遞給onclick屬性時，您尚未調用 function

<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 總是需要一個 function
2. 您需要指定要從按鈕中獲得的內容

選項1：

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

選項2：

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

3. 如果您想要一個列表並且每次需要單擊按鈕時都不清除它，您可以使用 +=
4. 對於新線，因為它是內部 HTML 您可以使用
   只要。

 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

您可能應該將按鈕更改為“輸入”，但將其類型保留為“按鈕”。 此外，不再使用 var，您應該像這樣使用“let”：

  <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>

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;
  
}