JavaScriptを使用してヘッダーテキストをボタンテキストに置き換えます。

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

出典

2016-05-11 Seneca 427

あなたが作業例を掲載場合は良好な応答を取得し、疑問、あなたに対応し、キーの行をコメントアウトすることがあります。もう一つの有用な戦略は、問題を表示するのに十分なだけコードを沸かせることです。たとえば、ヘッダとボタンを残しておけば、コードの残りの部分にコンセプトを適用することができます。 Jsfiddle、codepen、plunkerはすべてこれを行うためのオンラインツールです。 – Tyler

これはあなたが達成しようとしていることですか？ https://jsfiddle.net/25mpjvcq/ – Saad

あなたのbutton要素にイベントを追加しますが、他の回答が指摘したように、良い習慣は、より正確な検索のためにあなたの要素に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); 
    });

出典

2016-05-11 20:43:25 Goldlight

ありがとうございました！出来た！ –

まず第一に、あなたは、ブートストラップからボタンクラスを使用しているが、あなたは（私にguesを...）、div Sを作成しているbutton Sを作成していません。

とにかく、続行するには、onclick属性にコールバック関数を追加することです。魔法使いは1つの引数、つまりイベント自体を取ります。次に、イベントオブジェクトの属性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>

出典

2016-05-11 20:32:59 dlopez

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

出典

2016-05-11 20:33:10

かなり簡単作成中に要素に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>

出典

2016-05-11 21:35:29

JavaScriptを使用してヘッダーテキストをボタンテキストに置き換えます。

答えて

関連する問題