如何使用同名标签根据点击显示innerhtml？答案

【问题标题】：How to use same name tag to display innerhtml according to click?如何使用同名标签根据点击显示innerhtml？
【发布时间】：2016-05-09 09:25:24
【问题描述】：

html

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

</div>

javascript

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中有两个按钮是yes和no。如果用户点击yes，yes.onclick()将执行，如果用户点击no，no.onclick()将执行。在同一个部门hhh，我必须根据点击显示消息。但是如果我编写上面的代码，即使在点击之前也会显示消息。它仅将 hhh 视为一个名称。我如何编辑代码，以便它会根据点击显示消息？现在它已经覆盖了现有的消息。我不想覆盖。我也想显示上一条消息。

【问题讨论】：

不太清楚你在问什么。什么是“是”和“不是”？
Yes和no是两个按钮，这些js函数是用来点击yes和no按钮的
猜猜你有太多的 () 大括号在某处已经触发了代码。没有按钮的 HTML，虽然不能说什么是错的。分配事件时，根据使用的语法，事件将已经运行。
HTML 中的 div 元素没有 name 属性。从writing valid HTML开始。
jsfiddle.net/4c7xofa9

标签： javascript html onclick innerhtml

【解决方案1】：

如果你只有一个 div，你应该使用 getElementsByTagName() 或者更好的是你应该使用 getElementById。

在哪里为 js var 分配名称“yes”和“no”？也许问题是这样的。如果没有理由通过代码动态分配函数，您也可以只定义一个函数

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;

        }
}

然后将功能分配给你的按钮

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

【讨论】：

【解决方案2】：

在 javascript 中有很多方法可以处理点击事件。您似乎正在尝试设计一个按钮 UI。您不必解析元素数组，选择更好的选择器。 HTML 中的 div 元素也没有 name 属性，您的 all 数组为空。

一种方法如下所示。

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

【讨论】：

【解决方案3】：

<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

 }

【讨论】：

【解决方案4】：

all[i].innerHTML = ...

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

别忘了设置

white-space: pre-line;

在 CSS 中。

【讨论】：