如何获取单击按钮的内部文本?

时间:2019-02-02 08:40:37

标签: javascript arrays

我希望我的代码获取被单击的按钮的内部文本。我正在使用一个循环,但是循环仅返回最后一个值。如果我使用它作为一个onclick的功能,它不返回任何值。

<html>
<button id="btn">esteem</button>

<button id="btn">aqas</button>

<button id="btn">umar</button>

</html>

<script>
    var elms = document.querySelectorAll("[id='btn']");

    for (var i = 0; i < elms.length; i++)
        var q1 = elms[i].textContent || elms[i].innerText; <

<? php
    $ff = "<script>document.write(q1);</script>";
    echo $ff;

?>
</script>

2 个答案:

答案 0 :(得分:0)

尝试一下。使用textContent属性添加文本

var buttons = document.querySelectorAll("[id='btn']");
var buttontext;
for(var i=0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){document.querySelector('p').textContent += " " + this.innerHTML
    buttontext=this.innerHTML;
    console.log(buttontext)}
  )
}
<button id="btn">esteem</button>
<button id="btn">aqas</button>
<button id="btn">umar</button>

<p></p>

答案 1 :(得分:0)

要回答眼前的问题,可以归结为捕获单击的按钮元素并读取内容。

此方法有一些警告,因为在HTML中定义按钮的方式有很多,例如<input type="button" value="what you see">,完全没有内容。

因此,您必须至少实现两种获取按钮文本的方式,一种是嵌套的文本元素,另一种是值属性。

function clickHandler(event) {
	const target = event.target;
  const content = target.textContent || target.getAttribute('value');

	event.preventDefault();
  
  // show output
  document.querySelector('output').innerHTML = content;
}

function clickListener(button) {
	button.addEventListener('click', clickHandler);
}

const selector = 'input[type=button],input[type=submit],button';
const buttons = document.querySelectorAll(selector);

Array.from(buttons).forEach(clickListener);
<input type="button" value="one">
<input type="submit" value="two">
<button type="button">three</button>
<button type="button" value="ignored">four</button>
<button type="submit">five</button>

<div>
  You clicked: <output>nothing yet</output>
</div>


然后是具有相同id属性的多个元素的问题。您不能执行此操作,因为id 必须在每个页面上都是唯一的。这是类别和/或data-*属性发挥作用的地方。

我的示例演示了如何对页面上的每个可能的按钮进行操作,如果您需要定位一组特定的按钮,那么最好使用data-*属性。 添加此内容后,您还可以使用它的值代替按钮文本,因为文本发送的内容会随着时间的变化而变化。

function clickHandler(event) {
  const content = event.target.getAttribute('data-act');

	event.preventDefault();
  
  document.querySelector('output').innerHTML = content;
}

function clickListener(button) {
	button.addEventListener('click', clickHandler);
}

const selector = '[data-act]';
const buttons = document.querySelectorAll(selector);

Array.from(buttons).forEach(clickListener);
<button data-act="button-one">ONE</button>
<input type="button" data-act="input-button-two" value="TWO">

<div>
  You clicked <output>nothing yet</output>
</div>

将您所看到的与您采取的行动分开,可能会(节省)您很多时间