Question

我只使用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);
});

Answer 1

向您的按钮元素添加一个事件，但正如其他答案所指出的，一个好的做法是为您的元素分配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);
    });

Answer 2

首先，你没有创建button，你正在创建div，虽然你正在使用bootstrap中的按钮类（我猜...）。

无论如何，继续进行的方法是添加一个带有回调函数的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>

Answer 3

Just assign an ID for your header, and while creating the buttons in the loop. Just assign the onclick callback of the button, to get the id of the header, and replace the text

textOne.forEach(function(post) {
        var btnGroupFour = document.createElement('button');
        btnGroupFour.className = 'btn btn-default';
        btnGroupFour.innerHTML = post;
        btnGroupFour.onclick =  function(){document.getElementById('headerID').innerHTML = post} ;
        h.appendChild(btnGroupFour);
    });

应该适合你的情况。

短Demo

Answer 4

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

http://www.w3schools.com/jsref/met_element_addeventlistener.asp

<!DOCTYPE html>
<html>
<body>

<p>Hover over the checkbox to simulate a mouse-click.</p>

<script>
var divContainer = document.createElement('div');
divContainer.className = 'container';
document.body.appendChild(divContainer);

var row = document.createElement('div');
row.className = 'row';
divContainer.appendChild(row);

var col = document.createElement('div');
col.id = 'col-md-12';
row.appendChild(col);

var header = document.getElementById('col');
var h = document.createElement("H3");
h.innerHTML = "Nothing clicked yet!";
col.appendChild(h);

var star = document.createElement('div');
col.appendChild(star);

var btnStar = document.getElementById('col');
var textStar = ["Star"];
textStar.forEach(function(post) {
    var postStar = document.createElement("div");
    postStar.className = 'btn btn-default';
    postStar.innerHTML = post;
    postStar.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(postStar);

});


var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);

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;
    postDiv.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(postDiv);

});


var btnTwo = document.getElementById('col');
var textTwo = ["5", "6", "7", "8"];
textTwo.forEach(function(post) {
    var btnGroupFour = document.createElement('button');
    btnGroupFour.className = 'btn btn-default';
    btnGroupFour.innerHTML = post;
    btnGroupFour.addEventListener("click", function(){
    h.innerHTML = post;});
    col.appendChild(btnGroupFour);
});


var secondLine = document.createElement("HR");
document.body.appendChild(secondLine);
col.appendChild(secondLine);

var divThree = document.createElement('div');
col.appendChild(divThree);

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(){
    h.innerHTML = post;});
    divThree.appendChild(btnGroupFour);
});


</script>


</body>
</html>

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

4 个答案: