Htmlの<form>と私はこれらのコードを作っ

Question

のjavascript：

<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で変数に番号を取得する方法はありますか？
アドバイスをいただければ幸いです！ :)
ありがとうございました！

Answer 1

使用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>

Answer 2

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); 
} 

しかし、あなたは他のアプローチをよく調べるべきです。

Answer 3

<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> 

Answer 4

この例では、必要なイベントハンドラの量を減らすためにイベント委任として知られている技術を使用しています。また、サンプルコードの目的に合わせてユースケースを大幅に簡素化します。

コメントで指摘されたとして、あなたは本当にこのためa要素を使用すべきではありませんが、あなたはその後、主張する場合は、移動しようとしてからブラウザを防ぐためにhrefjavascript: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>