Question

我希望在点击后获取标签的值。我只是使用javascript而没有jquery。这是我的HTML：

<div class="touche 1">
   <h1>1</h1>
</div>
<div class="touche 2">
   <h1>2</h1>
</div>
<div class="touche 3">
   <h1>3</h1>
</div>

我需要将值1,2,3等变成变量。 div的工作就像一个计算器按钮！

谢谢！

Answer 1

如果您想直接访问<h1>代码，可以使用getElementsByTagName()，它会返回一组HTMLElements。您可以迭代它们附加一个click事件处理程序。

在事件处理程序中，您可以使用它的textContent属性来获取文本（读取为值），如下所示：

＆＃13;

var elms = document.getElementsByTagName("h1");
    for(var i=0;i<elms.length;i++){
      elms[i].addEventListener("click",function(){
        console.log(this.textContent);
    });
}

＆＃13;

<div class="touche 1">
   <h1>1</h1>
</div>
<div class="touche 2">
   <h1>2</h1>
</div>
<div class="touche 3">
   <h1>3</h1>
</div>

＆＃13;

如果要绑定<div>的侦听器，可以使用getElementsByTagName()或getElementsByClassName()来访问元素，遍历它们并附加click事件侦听器

在事件处理程序中，您可以使用children属性访问<h1>获取它的值，如上所述。

＆＃13;

var elms = document.getElementsByClassName("touche");
for(var i=0;i<elms.length;i++){
  elms[i].addEventListener("click",function(){
    console.log(this.children[0].textContent);
  });
}

＆＃13;

<div class="touche 1">
   <h1>1</h1>
</div>
<div class="touche 2">
   <h1>2</h1>
</div>
<div class="touche 3">
   <h1>3</h1>
</div>

＆＃13;

Answer 2

使用以下js执行此操作。 JSFIDDLE

var controls = document.getElementsByClassName("touche");
for(var i = 0;i<controls.length;i++)
{
    controls[i].onclick = function() {
        console.log(this.childNodes[1].innerText);

        alert(this.childNodes[1].innerText);
    };
}

Answer 3

这是代码

function getval(thisa)
{
  alert(thisa.innerHTML);
}

<div class="touche 1">
   <h1 onclick="getval(this)">1</h1>
</div>
<div class="touche 2">
   <h1 onclick="getval(this)">2</h1>
</div>
<div class="touche 3">
   <h1 onclick="getval(this)">3</h1>
</div>

使用javascript获取标记的值

3 个答案: