-3

I made these code:

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

Is there a way to get the number into variable in javascript when user click the link?
Any advice would be appreciated! :)
Thank You!

scrappedcola
  • 10,423
  • 1
  • 32
  • 43
Steven Tran
  • 104
  • 1
  • 8
  • If you want an interactive control to hang JavaScript off, use a button. Links are supposed to link to places. – Quentin May 31 '17 at 19:52

4 Answers4

1

Use onclick and you can take the text for the event

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>
XYZ
  • 4,450
  • 2
  • 15
  • 31
0

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

Though, you should better explore other approaches.

user3429660
  • 2,420
  • 4
  • 25
  • 41
  • Don't forget to include this within script tags as well, on your HTML file. If you want to simply get the value, you can also always go with document.GetElementById("NameofElement").value – Dylan Wright May 31 '17 at 20:03
0

This example uses a technique known as event delegation to reduce the amount of event handlers you need. It also greatly simplifies the use-case for the purposes of your sample code.

As was pointed out in a comment, you shouldn't really be using a elements for this, but if you insist then you'll want to set the href to javascript:void(0) to prevent the browser from trying to navigate.

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>
André Dion
  • 21,269
  • 7
  • 56
  • 60
-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>
Chandrika Shah
  • 638
  • 6
  • 6