'Need Guidance on how to make button click display on calculator window?

I am currently doing a coding Bootcamp and would like some guidance, one of my challenges are to use javascript to do the following:

"Using JavaScript, when the user clicks a button make the corresponding number and operator appear on the calculator's display screen. You might want to use the .innerHTML property to assist you with this. "

I have done something similar to a previous challenge which was the three input calculator, which I got down pretty well, I think.

Three input Calculator challenge solutions:

HTML

<body>
    <form class="form">
      <input type="text" id="num1" /> <input type="text" id="operator" />
      <input type="text" id="num2" /> <p class ="answer">Answer:</p> <p id="result"></p>
    </form>

    <input type="button" id="calc" value="calculate" onclick="threeInputCalc()"/>

    <script src="../js/ifCalc.js"></script>
  </body>

Javascript:

function threeInputCalc()
{
   num1 = parseInt(document.getElementById("num1").value);
   num2 = parseInt(document.getElementById("num2").value);
   operator = document.getElementById("operator").value;

   // logic for calculating input
    if(operator == "+")
    {
        result = num1 + num2;
        answer = document.getElementById("result").innerHTML = result;

    }
    else if (operator == "-")
    {
        result = num1 - num2;
        answer = document.getElementById("result").innerHTML = result;
        
    }
    else if (operator == "*")
    {
        result = num1 * num2;
        answer = document.getElementById("result").innerHTML = result;
       
    }
    else if (operator == "/")
    {
        result = num1 / num2;
        answer = document.getElementById("result").innerHTML = result;
    
    }
    else
    {
        alert("You may only provide mathematical operators");
    }
    
    console.log(`${num1} ${operator} ${num2} = ${result}`)
}

For the Calculator challenge, I am going about it more or less the same way I did for the Three input Calculator challenge.

This is what I have so far

HTML

<body>
    <header></header>
    <main>
      <div class="calc">
        <div class="backcalc">
          <div class="calcDisplay"></div>
        </div>
        <section class="background">
          <div class="numbers">
            <button id="9" onclick = "calcfunction()">9</button>
            <button id="8" >8</button>
            <button id="7" >7</button>
            <button id="6" >6</button>
            <button id="5" >5</button>
            <button id="4" >4</button>
            <button id="3" >3</button>
            <button id="2" ">2</button>
            <button id="1" >1</button>
            <button id="0" >0</button>
          </div>
        </section>
        <section>
          <div class="operators">
            <button id="plus" onclick = "calcfunction()">+</button>
            <button id="minus">-</button>
            <button id="divide">/</button>
            <button id="multiply">*</button>
            <div class="equals">
              <button id="equals" onclick="calcfunction()">=</button>
            </div>
          </div>
        </section>
      </div>
    </main>
    <footer></footer>
    <script src="../js/click-button.js"></script>
  </body>

Javascript

let num9;
let opPlus;
let equals;
let answer;
let result;


function calcfunction()
{
    num9 = document.getElementsById("9").value;
    opPlus= document.getElementsById("plus").value;
    equals = document.getElementsByClassName("equals").value;

    if(equals == answer)
    {
        result = numbers + operators + numbers;
        answer = document.getElementsByClassName("result").innerHTML = result;
    }
}

The above I am just testing to see if I get some kind of numbers displayed on the calculator screen, I am not sure if I should do the onclick for all the buttons, from 1-9 and all operators (+,-,/,*) or just do the onclick for the actual class name of the numbers and operators?

Keep in mind we are not doing objects and arrays just yet.

PS: I am not looking for the answer to the whole problem, just a point in the right direction.

Thank you in advance for your guidance.

javascripthtmlif-statement


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions