如何獲得一個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按鈕

回答

相關問題