Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by edgar robledo
edgar robledo
6,067 Points

addEventListener get value out

<section class="numberBoxWrap">

        <ul class="buttonUL">

          <li><button type="button" class="styleBoxButton" id="buttonBox0" name="number1" value="0">0</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox1" name="number1" value="1">1</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox2" name="number1" value="2">2</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox3" name="number1" value="3">3</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox4" name="number1" value="4">4</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox5" name="number1" value="5">5</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox5" name="number1" value="6">6</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox7" name="number1" value="7">7</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox8" name="number1" value="8">8</button></li>

          <li><button type="button" class="styleBoxButton" id="buttonBox9" name="number1" value="9">9</button></li>

        </ul>

</section>

let value;

let buttonUL = document.querySelector('.buttonUL');

let nuberButton = buttonUL.querySelectorAll('button');

for (var i = 0; i < nuberButton.length; i++) {

nuberButton[i].addEventListener("click", (event) =>{

       value += event.target.value; // i want to get this value out of the addEventListener            
        console.log(value); // here i get the the value

})

}

console.log(value); // if i use it out here every time i click a button i get nothing

Matthew Long
Matthew Long
28,407 Points

Depends on what you mean by "get value out". Secondly, what is nuberButton? Is that defined somewhere else that you haven't shown here? If you could provide more to go on that would be nice.

Matthew Long
Matthew Long
28,407 Points

Why do you want to get the value out of the event? Events happen when they happen and you'd typically do what you want inside the event listener function. You could look into creating a function and storing the value there, or maybe look into jQuerys event.result.

7 Answers

edgar robledo
edgar robledo
6,067 Points
edgar robledo
edgar robledo
6,067 Points

thanks for the help instead of taking the value out I just did every thing inside the addEventListener ();

edgar robledo
edgar robledo
6,067 Points
edgar robledo
edgar robledo
6,067 Points

see i been practicing my HTML5 and CSS3 and JS by building a website and adding new programs of what i have learned if you guys want to look at the solution here is the link to the sour code and thanks for all the help.

http://www.mathmagic4kids.com/TimesTablesJS/timeAddition.js

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

.querySelector takes only first element, you must use .querySelectorAll.

let buttons = document.querySelectorAll('.styleBoxButton');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function(event) { 
    console.log(event.target.value)
  }
}
Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

It's hard to say without full listing of your code both HTML and JS. And use markdown to post code.

edgar robledo
edgar robledo
6,067 Points

hey just updated my post and thanks for trying to help

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

I gave you js code above, that must work, did you check it?

Matthew Long
Matthew Long
28,407 Points

He was already using querySelectorAll(). Also, what you have is basically the same as what he has already. It doesn't "take the value out of" the onClick() event handler. It seems what the OP wants is generally not practiced

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

I think, you didn't try my js code. You may see there https://thimbleprojects.org/andech/377062. Button values appeares in console on click.

Matthew Long
Matthew Long
28,407 Points

Look at the comments in OPs updated post. I think you’re missing what he wants. He already knew how to use an event handler and log values to the console “inside the event”. Look at the two locations of his console.log()

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

Oh, it seems he update code, beacuse I remember, that his code didn't show values in console. But show values outside of the event listener? I think it is impossible and don't understand in what cases it must be needed)