的Html <form>和JavaScript

-3

<form> 
    <div class="row1"> 
     <div class="number" id="number7"><br> 
      <a href="javascript:calculate()">7</a> 
     </div> 
     <div class="number" id="number4"><br> 
      <a href="javascript:calculate()">4</a> 
     </div> 
     <div class="number" id="number1"><br> 
      <a href="javascript:calculate()">1</a> 
     </div> 
     <div class="number" id="number0"><br> 
      <a href="javascript:calculate()">0</a> 
     </div> 
    </div> 
</form>

有沒有辦法讓成數在JavaScript變量，當用戶點擊鏈接？
任何意見，將不勝感激！ :)
謝謝！

來源

2017-05-31 Steven Tran

如果你想要一個交互控制掛JavaScript後，使用按鈕。鏈接應該鏈接到地方。 – Quentin

使用onclick，你可以把文本事件

function calculate(event){ 
 
    event.preventDefault(); 
 
    var number = event.target.innerText; 
 
    console.log(number); 
 
}

<form> 
 
    <div class="row1"> 
 
    <div class="number" id="number7"><br> 
 
    <a href="" onclick="calculate(event)">7</a></div> 
 
    <div class="number" id="number4"><br> 
 
    <a href="" onclick="calculate(event)">4</a></div> 
 
    <div class="number" id="number1"><br> 
 
    <a href="" onclick="calculate(event)">1</a></div> 
 
    <div class="number" id="number0"><br> 
 
    <a href="" onclick="calculate(event)">0</a></div> 
 
    </div> 
 
</form>

來源

2017-05-31 19:51:45 XYZ

它應該是'onclick =「calculate」'。在調用者的上下文中，「事件」指的是什麼都沒有。 –

HTML：

<form> 
    <div class="row1"> 
    <div class="number" id="number7"><br> 
    <a href="#" onclick="calculate(event)">7</a></div> 
    <div class="number" id="number4"><br> 
    <a href="#" onclick="calculate(event)">4</a></div> 
    <div class="number" id="number1"><br> 
    <a href="#" onclick="calculate(event)">1</a></div> 
    <div class="number" id="number0"><br> 
    <a href="#" onclick="calculate(event)">0</a></div> 
    </div> 
</form>

的Javascript：

window.calculate = function(e) { 
    e.preventDefault(); 
    var number = parseInt(e.target.innerHTML); 
    alert("Number: " + number); 
}

雖然，你應該更好地探索其他方法。

來源

2017-05-31 19:54:43 user3429660

不要忘記在腳本標籤中也包含這個，在你的HTML文件中。如果你想簡單地獲得值，你也可以隨時使用document.GetElementById（「NameofElement」）。 –

-2

<script type="text/javascript"> 
function calculate(num) 
{ 
    var number = num.target.innerText; 
    alert(number); 
} 
</script> 
<form> 
    <div class="row1"> 
    <div class="number" id="number7"><br> 
    <a href="#" onclick="calculate(event)">7</a></div> 
    <div class="number" id="number4"><br> 
    <a href="#" onclick="calculate(event)">4</a></div> 
    <div class="number" id="number1"><br> 
    <a href="#" onclick="calculate(event)">1</a></div> 
    <div class="number" id="number0"><br> 
    <a href="#" onclick="calculate(event)">0</a></div> 
    </div> 
</form>

來源

2017-05-31 19:57:22

本例使用稱爲事件代表團的技術，以減少事件處理你所需要的量。爲了您的示例代碼，它也大大簡化了用例。

正如在評論中指出，你真的不應該使用這個a元素，但如果你堅持到底，那麼你要設置href到javascript:void(0)，以防止瀏覽器試圖導航。

document.addEventListener('click', function(e) { 
 
    if (e.target.tagName === 'A') { 
 
     alert(e.target.innerText); 
 
    } 
 
});

<form> 
 
    <div class="row1"> 
 
     <div class="number" id="number7"><br> 
 
      <a href="javascript:void(0)">7</a> 
 
     </div> 
 
     <div class="number" id="number4"><br> 
 
      <a href="javascript:void(0)">4</a> 
 
     </div> 
 
     <div class="number" id="number1"><br> 
 
      <a href="javascript:void(0)">1</a> 
 
     </div> 
 
     <div class="number" id="number0"><br> 
 
      <a href="javascript:void(0)">0</a> 
 
     </div> 
 
    </div> 
 
</form>

來源

2017-05-31 20:06:50

的Html <form>和JavaScript

回答

相關問題