CODEWITHSUNDEEP
javascripthtmlcss
someone
someone

Reputation: 703

how to store value from a button in to a variable from a click?

currently I change the display of my calc with values from buttons. The next step is storing it into a variable so I can then perform a function like (add,subtract) etc...

I read this - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables.

But, still I have no clue how to store and then do the function. Any guidance will be super helpful, a tutorial or documentation that I can follow along would be amazing.

 let currentOperator = null;
    let firstOperand = null;
    let secondOperand = null;
    //let toBeCleaned = false;
    let result = null;
    let display = document.getElementById("userinput");
    const numberButtons = document.querySelectorAll('.calc > .numbers');
    const operators = document.querySelectorAll(".operator");
    const equalSign = document.getElementById("equal");
    const clearButton = document.getElementById("clr");
    const deleteBtn = document.getElementById("del");
    
    
    
    numberButtons.forEach(btn => {
        btn.onclick = function (btn) {
          
            display.placeholder += btn.target.value;
            
        }
      })
    
    
    
    operators.forEach(op => {
        op.onclick = function (evt) {
            display.placeholder = evt.target.value;
        }
    })
    
    
        clearButton.onclick = function (evt) {
            if(clearButton.className ="clear")
            display.placeholder = evt.target.value ="";
        }
    
        equalSign.onclick = function (evt) {
            if (equalSign.className = "equals")
            display.placeholder += "=";
        }
    
        deleteBtn.onclick = function (evt) {
            if (deleteBtn.className ="delete")
            display.placeholder -= btn.value.slice(0,-1);
        }
    
    
    function sum (a,b) {
        if (target.value === 1 ) {
            alert("hey");
        }
    }
    
    
    
    function add(a,b) {
     return a + b; 
    
    }
    
    function subtract (a,b) {
        return a -b;
    }
    
    function multiply (a,b) {
        return a * b;
    }
    
    function divide (a,b) {
        a/b;
    }
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
       <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet">
    </head>
    <body>
       <div class="heading">
        <h1>Calculator!!!!</h1>
    </div>
    
    <div class="container">
    <div id="calculator" class="calc">
    <input type="field" id="userinput" placeholder="">
    
        <button  value= 7 class="numbers" id= "seven" >7</button>
        <button value =8 class="numbers" id= "eight">8</button>
        <button value =9 class="numbers"id= "nine">9</button>
        <button value =* class="operator"id= "multiply">*</button>
        <button value =4 class="numbers" id= "four">4</button>
        <button value =5 class="numbers" id=  "five">5</button>
        <button value =6 class="numbers" id= "six">6</button>
        <button value =- class="operator" id= "subtract">-</button>
        <button value =1 class="numbers" id= "one">1</button>
        <button value =2 class="numbers" id= "two">2</button>
        <button value =3 class="numbers" id=  "three">3</button> 
        <button value =+ class ="operator" id= "add">+</button>   
        <button value =/ class ="operator" id= "divide">/</button>
        
        <button class="clear" value ="" id= "clr">C</button>
        <button value = "" class="delete" id ="del">DEL</button>
        <button value ="=" class = "equals" id= "equal">=</button>
    </div>
    </div>
    
        <script src="script.js"></script>
    </body>
    </html>

Upvotes: 0

Views: 1569

Answers (1)

JBaczuk
JBaczuk

Reputation: 14589

Here is an example of storing the current operation (multiply, divide, etc.) into a variable currentOperation. First, you declare it with let and then you can modify it in the event handlers. You can do the same for the numbers.

let currentOperator = null;
let firstOperand = null;
let secondOperand = null;
//let toBeCleaned = false;
let result = null;
let display = document.getElementById("userinput");
const numberButtons = document.querySelectorAll('.calc > .numbers');
const operators = document.querySelectorAll(".operator");
const equalSign = document.getElementById("equal");
const clearButton = document.getElementById("clr");
const deleteBtn = document.getElementById("del");

let currentOperation = null;



numberButtons.forEach(btn => {
    btn.onclick = function (btn) {

        display.placeholder += btn.target.value;

    }
  })



operators.forEach(op => {
    op.onclick = function(evt) {
        currentOperation = evt.target.value;
    }
})


    clearButton.onclick = function (evt) {
        if(clearButton.className ="clear")
        display.placeholder = evt.target.value ="";
    }

    equalSign.onclick = function (evt) {
        if (equalSign.className = "equals")
        //display.placeholder += "=";
        console.log('currentOp', currentOperation);
    }

    deleteBtn.onclick = function (evt) {
        if (deleteBtn.className ="delete")
        display.placeholder -= btn.value.slice(0,-1);
    }


function sum (a,b) {
    if (target.value === 1 ) {
        alert("hey");
    }
}



function add(a,b) {
 return a + b; 

}

function subtract (a,b) {
    return a -b;
}

function multiply (a,b) {
    return a * b;
}

function divide (a,b) {
    a/b;
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
       <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet">
    </head>
    <body>
       <div class="heading">
        <h1>Calculator!!!!</h1>
    </div>
    
    <div class="container">
    <div id="calculator" class="calc">
    <input type="field" id="userinput" placeholder="">
    
        <button  value= 7 class="numbers" id= "seven" >7</button>
        <button value =8 class="numbers" id= "eight">8</button>
        <button value =9 class="numbers"id= "nine">9</button>
        <button value =* class="operator"id= "multiply">*</button>
        <button value =4 class="numbers" id= "four">4</button>
        <button value =5 class="numbers" id=  "five">5</button>
        <button value =6 class="numbers" id= "six">6</button>
        <button value =- class="operator" id= "subtract">-</button>
        <button value =1 class="numbers" id= "one">1</button>
        <button value =2 class="numbers" id= "two">2</button>
        <button value =3 class="numbers" id=  "three">3</button> 
        <button value =+ class ="operator" id= "add">+</button>   
        <button value =/ class ="operator" id= "divide">/</button>
        
        <button class="clear" value ="" id= "clr">C</button>
        <button value = "" class="delete" id ="del">DEL</button>
        <button value ="=" class = "equals" id= "equal">=</button>
    </div>
    </div>
    
        <script src="script.js"></script>
    </body>
    </html>

Upvotes: 1

Related Questions