Is there a way to change a card text using JavaScript?

Question

I am trying to change the text from "yes" to "ok," but get the error: Uncaught TypeError: Cannot read property 'addEventListener' of null.

JS

// create DOM element references
let card1= document.querySelector("div.class-1");
card1.addEventListener("mouseenter", function() {
    let text1 = document.querySelector("p.card-text");
    console.log(text1);
    text1.innerHTML = "Ok";
});

HTML

<div class="col-sm-12 col-md-6 col-lg-4 pb-4">
                    <div class="card-item card-1">
                        <p class="card-text">Yes</p>
                    </div>
                </div>

well your selector did not find the image... where is this "class-1" ??? — epascarello, Nov 07 '20 at 22:56
Change `class-1` to `card-1` in the js part. You do not have any tag call `class-1`. Also you can change that class of 'card-1` to `card-1` in HTML part. — M. Sallar Rabiei, Nov 07 '20 at 23:10

score 0 · Answer 1 · answered Nov 07 '20 at 22:57

There is no div tag that has .class-1 class. From your html code, you need to find the selector with div.card-1 as follows.

let card1 = document.querySelector("div.card-1");
card1.addEventListener("mouseenter", function () {
  let text1 = document.querySelector("p.card-text");
  console.log(text1);
  text1.innerHTML = "Ok";
});

<div class="col-sm-12 col-md-6 col-lg-4 pb-4">
  <div class="card-item card-1">
    <p class="card-text">Yes</p>
  </div>
</div>

Is there a way to change a card text using JavaScript?

1 Answers1