同じ名前のタグを使用して、クリックに応じてinnerhtmlを表示するにはどうすればよいですか？

Question

HTML

yes.onclick =function() 
{ 
var all = document.getElementsByName("hhh"); 
    for(var i = 0, max = all.length; i < max; i++) 
     { 
      all[i].innerHTML="You have clicked Yes."; 

     } 
} 


no.onclick =function() 
{ 
var all = document.getElementsByName("hhh"); 
    for(var i = 0, max = all.length; i < max; i++) 
     { 
      all[i].innerHTML="You have clicked No."; 

     } 
} 

ここでは、HTMLの

<div name="hhh" class="col-sm-7 new" align="left" > 

</div> 

Javascriptを2つのボタンがはい、ユーザーがクリックするno.Ifはい、yes.onclickは（）が実行されていないと、ユーザーがクリックした場合はNO、NO。 onclick（）が実行されます。 同じ部門では、クリックに応じてメッセージを表示する必要があります。しかし、私は上記のコードを記述すると、メッセージはクリックする前に表示されます。 hhhは1つの名前だけと考えています。どうすればコードを編集して、クリックに応じてメッセージを表示することができますか？今は既存のメッセージを書くことを終えています。私は書き込みをしたくありません。前のメッセージも表示したいです。

Answer 1

<div name="hhhYest" class="col-sm-7" onClick="clickEvent('yes')" new" align="left" > 
</div> 
<div name="hhhNo" class="col-sm-7" onClick="clickEvent('no')" new" align="left" ></div> 

function clickEvent(yesOrNo) 
{ 
//your logic here yesOrNo 

} 

Answer 2

uが一つだけのdivを持っている場合、uはgetElementByIdをを使うべきgetElementsByTagNameの（）以上を使用する必要があります。

ここで、js varに「はい」と「いいえ」という名前を割り当てますか？多分問題はそれです。 コードによってdinamically機能を割り当てるする理由がない場合、あなたはまた、JavaScriptでイベントをクリックし処理するために多くの方法があります

<input type="button" value="yes/no" onClick="myError(this)"> 

Answer 3

ウルボタンに

function myError(e){ 
    var all = document.getElementsByTagName("hhh"); 
     for(var i = 0, max = all.length; i < max; i++) 
     { 
      all[i].innerHTML="You have clicked " + e.value; 

     } 
} 

が、その後の機能を割り当てるだけで一つの関数を定義することができます。あなたがボタンのUIを設計しようとしているようです。あなたは要素の配列を解析する必要はありません、より良いセレクターを選択してください。 HTMLのdiv要素の名前属性もありません。すべて配列はnullです。

これを実行する方法の一例を以下に示します。

https://jsfiddle.net/699ddkvk/

<div id="hi" style="background-color: red; width:50px; height:50px;" align="left" ></div> 
<br> 
<div id="ho" style="background-color: blue; width:50px; height:50px;" align="left" ></div> 

red = document.getElementById("hi"); 
blue = document.getElementById("ho"); 

red.onclick=function(){ 
    red.innerHTML="YES"; 
}; 

blue.onclick=function(){ 
    blue.innerHTML="YES"; 
}; 

Answer 4

all[i].innerHTML = ... 

all[i].innerHTML += "\n" + ... 

とCSSで

white-space: pre-line; 

を設定するfiorgetはありません。