如何根据点击使用相同的名称标记来显示innerhtml

How to use same name tag to display innerhtml according to click?

本文关键字：innerhtml 显示 何根      更新时间：2023-09-26

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只是一个名字。我如何编辑代码，使其根据单击显示消息？现在它正在重写现有的信息。我不想写得太多。我也想显示上一条消息。

u应该使用getElementsByTagName（），如果只有一个div，则最好使用getElementById。

您将名称"yes"answers"no"分配给js变量的位置？也许问题就在于此。如果没有理由按代码一般分配函数，您也可以只定义一个函数

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

然后将功能分配给ur按钮

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

javascript中有很多方法可以处理点击事件。看起来你正在尝试设计一个按钮UI。您不应该解析一个元素数组，选择一个更好的选择器。此外，HTML中的div元素没有name属性，all数组为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";
};

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

all[i].innerHTML = ...

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

不要设定

white-space: pre-line;

在css中。

相关文章：