add event listner is not a function

Question

Im trying to add an event listener to a button so when its pressed it can add a value into a container.

<div className="grid-container">
            <div>
            <button id="redBet" className="redButton" onclick={this.handleBetsRed}>Place Red</button>
            <div id="redSearch" class="ui search">
              <input class="prompt" type="text" placeholder="Common passwords..." />
                <div class="results">
                  <p className="para"></p>
                </div>
                </div>
            </div>

The Button is inside the above code with the onclick to run the function below:

handleBetsRed = () => {
    document.getElementsByClassName("redButton").addEventListener("click", () => {
      console.log("Yeet")
    })
  
  }

this function is not inside any function and right above the render, return statements.

`getElementsByClassName()` returns a nodeList not a single element. — Randy Casburn, Oct 16 '20 at 00:29
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Oct 16 '20 at 00:32
Consider not using querySelector at all when using react. It’s not necessary. Use a ref instead. — evolutionxbox, Oct 16 '20 at 00:34

score -1 · Answer 1 · answered Oct 16 '20 at 00:32

replace onclick with onClick in the redButton, and remove the getElementsByClassName from the click handler function

<div className="grid-container">
  <div>
    <button id="redBet" className="redButton" onClick={this.handleBetsRed}>Place Red</button>
    <div id="redSearch" class="ui search">
      <input class="prompt" type="text" placeholder="Common passwords..." />
        <div class="results">
          <p className="para"></p>
        </div>
    </div>
  </div>
</div>

handleBetsRed = () => {
  console.log("Yeet")
}

This question has a duplicate. Please may you flag it as such? — evolutionxbox, Oct 16 '20 at 00:33

ezio4df · Accepted Answer · 2020-10-16T00:36:45.180

-1

there are two issues,

1:

document.getElementsByClassName("redButton")

Here, getElementsByClassName returns HTMLCollection containing matched Nodes, Not a single on. So, U probably wanna do something like this,

document.getElementsByClassName("redButton")[0]

Or, U may use querySelector,

document.querySelector(".redButton")

2:

 <button id="redBet" className="redButton" onclick={this.handleBetsRed}>Place Red</button>

Here, onclick did u mean onClick

edited Oct 16 '20 at 00:36

answered Oct 16 '20 at 00:32

ezio4df

3,541
6
16
31

1

Hiya, this question has a duplicate. Please may you flag it as such? – evolutionxbox Oct 16 '20 at 00:35

add event listner is not a function

2 Answers2

1:

2: