如何获得一个HTML按钮

挣扎像往常一样的概念textValue“这个”如何获得一个HTML按钮

我有一个页面上的按钮，我希望得到一个按钮的文本价值点击，让我可以调用PHP脚本时使用该值。

我想使用最小的带宽，所以我想我可以使用我的按钮的文本值作为变量。所以这样，我避免给我的Button一个唯一的ID，也避免了用VAL属性重复值。

我从来没有完全理解'this'的概念。我认为点击Button的值将被传递给onClick函数 - 显然不是或者我不知道正确的语法。

它可能/可行吗？

 <style> 
      button { padding: 10px; margin-right: 20px; font-size: 1.2em; background-color: green; color: white; } 
      button:hover { background-color: orange; } 
     </style> 
    </head> 

    <body> 
    <p>Click button and call php script with Button textValue as a POST variable</p> 

    <button onclick="btnClick();">Quercus petraea</button> 
    <button onclick="btnClick();">Betula pendula</button> 
    <button onclick="btnClick();">Fagus sylvatica</button> 
    <button onclick="btnClick();">Acer campestre</button> 
    <button onclick="btnClick();">Acer cappodocium</button> 
    <button onclick="btnClick();">Pinus thunbergii</button> 

    <script> 
    function btnClick() { 
     var btnText = this.textContent || this.innerText; 
     alert("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
    } 
    </script>

来源

2017-04-18 mcl

'的onclick = “btnClick.call（本）;”'读[呼叫（HTTPS： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call） – Satpal

问题与你实现它设置的背景this。根据您当前的实施this参考窗口不是调用事件的元素。

您需要设置正确的上下文，这可以通过多种方式实现。

使用.call()

function btnClick() { 
 
    var btnText = this.textContent || this.innerText; 
 
    console.clear(); 
 
    console.log("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
 
}

<button type="button" onclick="btnClick.call(this);">Quercus petraea</button> 
 
<button type="button" onclick="btnClick.call(this);">Betula pendula</button>

使用bind()

function btnClick() { 
 
    var btnText = this.textContent || this.innerText; 
 
    console.clear(); 
 
    console.log("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
 
}

<button type="button" onclick="btnClick.bind(this)();">Quercus petraea</button> 
 
<button type="button" onclick="btnClick.bind(this)();">Betula pendula</button>

霸ssing this到btnClick功能和使用参数

function btnClick(elem) { 
 
    var btnText = elem.textContent || elem.innerText; 
 
    console.clear(); 
 
    console.log("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
 
}

<button type="button" onclick="btnClick(this);">Quercus petraea</button> 
 
<button type="button" onclick="btnClick(this);">Betula pendula</button>

不过我建议你摆脱在线点击处理，并使用不引人注目的事件处理程序

function btnClick() { 
 
    var btnText = this.textContent || this.innerText; 
 
    console.clear(); 
 
    console.log("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
 
} 
 

 
document.querySelectorAll(".button").forEach(function(element) { 
 
    element.addEventListener('click', btnClick); 
 
})

<button type="button" class="button">Quercus petraea</button> 
 
<button type="button" class="button">Betula pendula</button>

来源

2017-04-18 08:23:43 Satpal

在Javascript中，this引用了作用域对象/函数。

所以 - 如果你想使用该按钮的背景下，你需要通过this的btnClick函数里面的参数：

<button onclick="btnClick(this);">Quercus petraea</button> 
         ^

的Javascript：

function btnClick(btn) { 
    var btnText = btn.textContent || btn.innerText; 
    alert("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
}

来源

2017-04-18 08:21:06

这非常有启发性。我现在可能明白'这个'会好一点。非常感谢。 – mcl

乐意帮忙！ –

你可以得到其中点击触发的，通过阅读window.event.target元素，看到以下内容：

function btnClick() { 
 
    var btnText = window.event.target.textContent || window.event.target.innerText; 
 
    console.log("calling AJAX PHP with POST value of the button pressed textContent = " + btnText); 
 
}

<p>Click button and call php script with Button textValue as a POST variable</p> 
 
<button onclick="btnClick();">Quercus petraea</button> 
 
<button onclick="btnClick();">Betula pendula</button> 
 
<button onclick="btnClick();">Fagus sylvatica</button> 
 
<button onclick="btnClick();">Acer campestre</button> 
 
<button onclick="btnClick();">Acer cappodocium</button> 
 
<button onclick="btnClick();">Pinus thunbergii</button>

我希望它可以帮助你，再见。

来源

2017-04-18 08:29:51 Alessandro

谢谢 - 另一个选项 – mcl

我你的配合需要通过本varible在onclick然后韩德尔它

<html> 
<body> 
<p>Click button and call php script with Button textValue as a POST variable</p> 

<button onclick="btnClick(this);">Javascript 1 </button> 
<button onclick="btnClick(this);"> Javascript 2 </button> 
<script> 
<!-- javascript function -- > 

function btnClick(e) { 
    var btnText = e.innerHTML; 
    alert(btnText); 
}

来源

2017-04-18 08:35:54 mindmyweb

今天早些时候错过了这个答案 - 谢谢。 – mcl

如何获得一个HTML按钮

回答

相关问题