0

I try to make a simple calculator using HTML + CSS + Javascript, couple thing I stuck at for hours, I also check around on W3 school, code pen and here. Really appreciate you guys help for the newbie.

The problem I have here:

  1. Can't get the value from my button to my javascript, and I try to use eval to do the math.
  2. I try to let the button value show up my textarea.

Thank you guys so much!

my part of button HTML code:

<body>
        </div> -->
    <table>
          <tr>
            <th>
            <button class="key" type="button" value="clear" name="button"> C </button>
            <input class="answer2" type="text" name="" value=""
         </tr>

        <tr>
            <th>
            <button type="button" value= "7" name="button"> 7 </button>
            <button type="button" value= "8" name="button"> 8 </button>
            <button type="button" value= "9" name="button"> 9 </button>
            <button id="bnt1" type="button" value= "/" name="button"> / </button>

            <th>
         </tr>

Here's my javascript code

let button = document.querySelectorAll("button")
// let bntumber = document.querySelectorAll("button").value // this one I got get undefined.
console.log(button) // just checking my button selector is working or not.


///////// Make the magicial math happen //////////

function calulator () {
    let result = [];
    for (let i = 0 ; i < button.length ; i ++) { 
// go through the loop, select button to create value
        button.addEventListener("click", function(){
           result.push(button[i].value)    
// button value add in the result array
        })

    }
    return button
    console.log(eval(result));
}

///////////make the button value show up in the textarea///////////////

function showtext() {
    let text = document.querySelector("button")
    let showtext = document.getElementsByClassName("answer2");
    showtext.innerHTML = text.value;
}


////////after get the result, press "c" button to clear the setting////////

function cleartext () {
    let text = document.querySelector("button")
    let showtext = document.getElementsByClassName("answer2");
    showtext.innerHTML = text.value;
}

I don't put CSS here. BIG THANKS!

Rohit Poudel
  • 1,793
  • 2
  • 20
  • 24
madebymt
  • 377
  • 1
  • 4
  • 27
  • [Don't use `eval()`](https://forum.freecodecamp.org/clicks/track?url=https%3A%2F%2Fgithub.com%2Fgetify%2FYou-Dont-Know-JS%2Fblob%2Fa5b49a8ec0ecd328e76618dc6d5eef8470ce9e81%2Fscope%2520%2526%2520closures%2Fch2.md%23eval&post_id=45843&topic_id=26599) – zer00ne Aug 05 '17 at 02:37
  • You should post your code as a runnable snippet (use the `<>` button in the editor). There are bugs in your markup that may or may not be in your real code. Your error is probably related to `result.push(button[i].value) ` since *i* is in a closure. Probably duplicate of [*JavaScript closure inside loops – simple practical example*](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). – RobG Aug 05 '17 at 02:48

1 Answers1

0

Your 'button' variable is an array. I guess you need to add an index as in

button[i].addEventListener("click", function(){
       result.push(button[i].value)
barbsan
  • 3,418
  • 11
  • 21
  • 28
Emmy
  • 1
  • 1