使用JavaScript将标题文本替换为按钮文本

我只使用JavaScript来创建按钮，需要向按钮添加单击处理程序，用按钮的内容替换标题。一段时间以来，我一直在想如何做到这一点。任何帮助都会很好！谢谢大家!

下面是创建按钮和标题的JavaScript代码

var col = document.createElement('div');
col.className = 'col';
document.body.appendChild(col);

var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);

var divOne = document.createElement('div');
col.appendChild(divOne);

var btnOne = document.getElementById('col');
var textOne = ["1", "2", "3", "4"];
textOne.forEach(function(post) {
    var postDiv = document.createElement("div");
    postDiv.className = 'btn btn-default';
    postDiv.innerHTML = post;
    col.appendChild(postDiv);
});

---

首先，您不是在创建

button

s，而是在创建

div

s，尽管您使用的是bootstrap（igues…）中的按钮类

无论如何，继续的方法是添加一个带有回调函数的

onclick

属性，它接受一个参数：事件本身。然后，使用事件对象的

target

属性，可以访问事件源标记，使用

value

可以获得值

就这样,

<input type="button" id="button" value="Test Value!" />
<span id="output"></span>
<script>
    document.getElementById("button").addEventListener('click', callback);
    function callback(e) { document.getElementById("output").innerHTML = e.target.value; }
</script>

document.getElementById（“按钮”）.addEventListener（“单击”，回调）；
函数回调（e）{document.getElementById（“输出”）.innerHTML=e.target.value；}

应该适合你的情况

---

简短的

将事件添加到按钮元素，但正如其他答案所指出的，一个好的做法是为元素分配ID，以便更准确地查找：

var btnOne = document.getElementById('col');
    var textOne = ["Left", "Middle", "Right"];
    textOne.forEach(function(post) {
        var btnGroupFour = document.createElement('button');
        btnGroupFour.className = 'btn btn-default';
        btnGroupFour.innerHTML = post;
        btnGroupFour.addEventListener("click", function() {
        var header = document.getElementsByTagName('H3')[0];
        header.innerHTML = this.innerHTML;
    }, false);
        divThree.appendChild(btnGroupFour);
    });

---

非常简单，只需在创建过程中将eventListener添加到元素中即可。我真正需要添加到代码中的是：.addEventListener（“单击”，function（）{h.innerHTML=post；}）

将鼠标悬停在复选框上以模拟鼠标单击

var divContainer=document.createElement（'div'）；
divContainer.className='container'；
document.body.appendChild（divContainer）；
var行=document.createElement（'div'）；
row.className='row'；
divContainer.appendChild（行）；
var col=document.createElement（'div'）；
col.id='col-md-12'；
行。追加子行（列）；
var header=document.getElementById（'col'）；
var h=document.createElement（“H3”）；
h、 innerHTML=“尚未单击任何内容！”；
阿佩奇尔德上校（h）；
var star=document.createElement（'div'）；
佩德奇尔德上校（星）；
var btnStar=document.getElementById（'col'）；
var textStar=[“Star”]；
textStar.forEach（函数（post）{
var postStar=document.createElement（“div”）；
postStar.className='btn btn default'；
postStar.innerHTML=post；
addEventListener（“单击”，函数（）{
h、 innerHTML=post；}）；
潘德查尔德上校（邮星）；
});
var secondLine=document.createElement（“HR”）；
document.body.appendChild（第二行）；
副上校（第二行）；
var divOne=document.createElement（'div'）；
佩德奇尔德上校（女主角）；
var btnOne=document.getElementById（'col'）；
变量textOne=[“1”、“2”、“3”、“4”]；
textOne.forEach（函数（post）{
var postDiv=document.createElement（“div”）；
postDiv.className='btn btn default'；
postDiv.innerHTML=post；
postDiv.addEventListener（“单击”，函数（）{
h、 innerHTML=post；}）；
上校（邮差）；
});
var btnTwo=document.getElementById（'col'）；
var textwo=[“5”、“6”、“7”、“8”]；
text2.forEach（函数（post）{
var btnGroupFour=document.createElement（'button'）；
btnGroupFour.className='btn btn default'；
btnGroupFour.innerHTML=post；
btnGroupFour.addEventListener（“单击”，函数（）{
h、 innerHTML=post；}）；
col.appendChild（第四组）；
});
var secondLine=document.createElement（“HR”）；
document.body.appendChild（第二行）；
副上校（第二行）；
var divThree=document.createElement（'div'）；
佩德奇尔德上校（第三分队）；
var btnOne=document.getElementById（'col'）；
var textOne=[“左”、“中”、“右”]；
textOne.forEach（函数（post）{
var btnGroupFour=document.createElement（'button'）；
btnGroupFour.className='btn btn default'；
btnGroupFour.innerHTML=post；
btnGroupFour.addEventListener（“单击”，函数（）{
h、 innerHTML=post；}）；
第三组。附加子组（btnGroupFour）；
});

有了这么多的代码，如果您发布了一个工作示例并注释了与您的问题相对应的关键行，您可能会得到更好的响应。另一个有用的策略是将代码简化为足以显示问题的代码。例如，如果保留标题和一个按钮，则可以将该概念应用于代码的其余部分。Jsfiddle、codepen、plunker都是允许您这样做的在线工具。这就是您想要实现的吗？

var btnOne = document.getElementById('col');
    var textOne = ["Left", "Middle", "Right"];
    textOne.forEach(function(post) {
        var btnGroupFour = document.createElement('button');
        btnGroupFour.className = 'btn btn-default';
        btnGroupFour.innerHTML = post;
        btnGroupFour.addEventListener("click", function() {
        var header = document.getElementsByTagName('H3')[0];
        header.innerHTML = this.innerHTML;
    }, false);
        divThree.appendChild(btnGroupFour);
    });