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

我试图找出如何在段落中显示按钮的值。我觉得这非常简单，我只是在做一些愚蠢的事情

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

胸部训练
杠铃压力机
要做的训练列表


函数Add2list（）{
var x=document.getElementById（“0”）
document.getElementById（“Workouts2do”）.innerHTML=x；
}

Add2list是一个函数，因此

onclick=“Add2list（）”

需要按钮的值，因此

var x=document.getElementById（“0”）。值

函数Add2list（）{
var x=document.getElementById（“0”）.value
document.getElementById（“Workouts2do”）.innerHTML=x；
}

胸部训练
杠铃压力机
要做的训练列表

您尚未添加要从按钮获取的属性。此外，您不能直接添加整个引用

只需提及要从按钮中获取的属性

传递给onclick属性时，您尚未调用该函数

胸部训练
杠铃压力机
要做的训练列表


函数Add2list（）{
var x=document.getElementById（“0”）.value
document.getElementById（“Workouts2do”）.innerHTML=x；
}

OnClick总是需要一个函数

您需要指定要从按钮中获取的内容

备选案文1：

var x=document.getElementById（“0”）.value
document.getElementById（“Workouts2do”）.innerHTML=x；

备选案文2：

var x=document.getElementById（“0”）
document.getElementById（“Workouts2do”）.innerHTML=x.value；

如果你想有一个列表，而不是每次需要点击按钮时都清除它，你可以使用+=

对于新行，因为它是内部HTML，所以只能使用

函数Add2list（）{
var x=document.getElementById（“0”）
document.getElementById（“Workouts2do”）.innerHTML+=x.value+`
`；
}

胸部训练
杠铃凳
按
要做的训练列表

您可能应该将按钮更改为“输入”，但将其类型保留为“按钮”。此外，不再使用var，您应该使用“let”，如下所示：

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

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

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