Issue with onclick in JS function - Html

lambo3000
March 17, 2023
125 views
2 votes
3 Answers

This is my first time using a JS function and I want the answer to 2*2 to appear on the screen when the equals button is clicked. This is my code that isn’t working:image of calculator I’m working on

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<rel ="stylesheet"> 
</head>
<body>
<div class="calculator">
  <div class="screen"><p id="sum"><span id="n1">2</span> &#xd7 <span id="n2">2</span></p></div>

  <script>
  var a = #n1
  var b = #n2
    function myFunction(a,b) {
    return a * b;
  }
  </script>

  <div class="container-buttons">
    <div class="buttons">7</div>
    <div class="buttons">8</div>
    <div class="buttons">9</div>
    <div class="buttons division">&#xf7</div>
    <div class="buttons">4</div>
    <div class="buttons">5</div>
    <div class="buttons">6</div>
    <div class="buttons multiplication">&#xd7</div>
    <div class="buttons">1</div>
    <div class="buttons">2</div>
    <div class="buttons">3</div>
    <div class="buttons substraction">&#x2212</div>
    <div class="buttons">0</div>
    <div class="buttons">.</div>
    <div class="buttons equals"><input id="sum-answer" type="button"     onclick="document.getElementById('sum').innerHTML=myFunction(a,b)" value="=">
    </div>
    <div class="buttons addition">+</div>
  </div>  
</div>
</body>               
</html>

I created a function to return the result of a * b. Inside an input element of button type, I’ve set onclick property to go to the relevant element – which is the p element (id="sum") inside the div element (id="screen") – and used document.getElementById("sum").innerHTML=myFunction(a,b). But this isn’t working.

Answers

If you set your variables a and b to numbers instead, your function works.
#n1 and #n2 are not correct javascript syntax.

I guess what you are after is to get the number that is in #n1 and #n2

You can do this by getting the content when you are running the function.

var a;
var b;

function myFunction(a, b) {
  a = document.getElementById('n1').innerHTML;
  b = document.getElementById('n2').innerHTML;
  return a * b;
}

<body>
  <div class="calculator">
    <div class="screen">
      <p id="sum"><span id="n1">2</span> &#xd7 <span id="n2">2</span></p>
    </div>

    <div class="container-buttons">
      <div class="buttons">7</div>
      <div class="buttons">8</div>
      <div class="buttons">9</div>
      <div class="buttons division">&#xf7</div>
      <div class="buttons">4</div>
      <div class="buttons">5</div>
      <div class="buttons">6</div>
      <div class="buttons multiplication">&#xd7</div>
      <div class="buttons">1</div>
      <div class="buttons">2</div>
      <div class="buttons">3</div>
      <div class="buttons substraction">&#x2212</div>
      <div class="buttons">0</div>
      <div class="buttons">.</div>
      <div class="buttons equals"><input id="sum-answer" type="button" onclick="document.getElementById('sum').innerHTML=myFunction(a,b)" value="=">
      </div>
      <div class="buttons addition">+</div>
    </div>
  </div>
</body>

ERROR: #n1 this is not a right way to use id’s , so i updated code.it may helpful to you.

      $(document).on('click', '#sum-answer', function() {
        let a = $(document).find("#n1").html();
        let b = $(document).find("#n2").html();
         (a && b) && $(document).find("#sum").html(a * b);

      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <rel="stylesheet">
</head>

<body>
  <div class="calculator">
    <div class="screen">
      <p id="sum"><span id="n1">2</span> &#xd7 <span id="n2">2</span></p>
    </div>
    
    <div class="container-buttons">
      <div class="buttons">7</div>
      <div class="buttons">8</div>
      <div class="buttons">9</div>
      <div class="buttons division">&#xf7</div>
      <div class="buttons">4</div>
      <div class="buttons">5</div>
      <div class="buttons">6</div>
      <div class="buttons multiplication">&#xd7</div>
      <div class="buttons">1</div>
      <div class="buttons">2</div>
      <div class="buttons">3</div>
      <div class="buttons substraction">&#x2212</div>
      <div class="buttons">0</div>
      <div class="buttons">.</div>
      <div class="buttons equals"><input id="sum-answer" type="button" value="=">
      </div>
      <div class="buttons addition">+</div>
    </div>
  </div>
</body>

</html>

Here is full example

look below

document.addEventListener("DOMContentLoaded", function(event) { 
  var els = document.querySelectorAll('.buttons');
  var screen = document.querySelectorAll('.screen')[0];
  
  function add_to_screen(e){
    var el = e.target;
    if (el.className == 'buttons' || el.className == 'buttons division' || el.className == 'buttons multiplication' || el.className == 'buttons substraction' || el.className == 'buttons addition'){
      screen.innerHTML += el.innerHTML;
     }
    
    if(el.className == 'buttons clear'){
      screen.innerHTML = '';
    }
    
    if(el.className == 'buttons equals'){
      var res = screen.innerHTML;
      if(res.includes('+')){
        var a = res.split('+');
        screen.innerHTML = parseInt(a[0]) + parseInt(a[1]);
      }
      if(res.includes('-')){
        var a = res.split('-');
        screen.innerHTML = parseInt(a[0]) - parseInt(a[1]);
      }
      if(res.includes('*')){
        var a = res.split('*');
        screen.innerHTML = parseInt(a[0]) * parseInt(a[1]);
      }
      if(res.includes('/')){
        var a = res.split('/');
        screen.innerHTML = parseInt(a[0]) / parseInt(a[1]);
      }
    }
  }

  [].forEach.call(els, function(el) {
    el.addEventListener('click', add_to_screen);
  });


  
});

.screen{
  display: block;
  width: 200px;
  height: 20px;
  border: 1px solid #222;
  text-align: right;
}

.container-buttons{
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
.container-buttons .buttons{
  background-color: #eee;
  border: 1px solid #ddd;
  margin: 2px;
  width: 44px;
  height: 20px;
  text-align: center;
}
.clear{
  display: block;
  width: 100%;
}

<html>
<body>
<div class="calculator">
  <div class="screen">
  </div>

  <div class="container-buttons">
    <div class="buttons">7</div>
    <div class="buttons">8</div>
    <div class="buttons">9</div>
    <div class="buttons division">/</div>
    <div class="buttons">4</div>
    <div class="buttons">5</div>
    <div class="buttons">6</div>
    <div class="buttons multiplication">*</div>
    <div class="buttons">1</div>
    <div class="buttons">2</div>
    <div class="buttons">3</div>
    <div class="buttons substraction">-</div>
    <div class="buttons">0</div>
    <div class="buttons">.</div>
    <div class="buttons equals">=</div>
    <div class="buttons addition">+</div>
    <div class="buttons clear">clear</div>
  </div>  
</div>
</body>               
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Issue with onclick in JS function – Html

Answers