Change Paragram using DOM manupulations

Question

document.querySelector("#myBtn").onclick = function () {
  console.log("Clicked");
  const h1 = document.querySelector("#myH1");
  const underline = document.createElement("u");
  underline.innerText = "Hey bro.";
  h1.innerText = "";
  h1.append(underline);

  const p = document.querySelector(".myP");
  p.forEach((element) => (element.innerText = "Thank You!!!!"));

  const btn = document.querySelector("button");
  btn.remove();
};

p.forEach((element) => (element.innerText = "Thank You!"));

I got: Error TypeError p.forEach is not a function

EDIT: Thanks For Answer this question I really appriciated

`querySelector` returns an HTML Element not an array like structure... — DecPK, Nov 20 '21 at 15:52
Do you mean to use `querySelectorAll`? `querySelector` only returns the first matching node (if present), and not a node list. — Terry, Nov 20 '21 at 15:53
Does this answer your question? [forEach is not function](https://stackoverflow.com/questions/61393045/foreach-is-not-function) — Ivar, Nov 20 '21 at 17:13

Ran Turner · Accepted Answer · 2021-11-20T16:12:54.890

1

The Document method querySelector() returns the first Element within the document that matches the specified selector.

You could use the getElementsByClassName instead

var p = document.getElementsByClassName('myP"');
for (let i = 0; i < p.length; i++){
  p[i].innerText = "Thank You!!!!";
}

edited Nov 20 '21 at 16:12

answered Nov 20 '21 at 16:01

Ran Turner

14,906
5
47
53

score 0 · Answer 2 · answered Nov 20 '21 at 15:52

0

querySelector returns just 1 element. Use querySelectorAll to return a list of elements matching the given selector.

answered Nov 20 '21 at 15:52

Henrikh Kantuni

901
11
14

score 0 · Answer 3 · answered Nov 20 '21 at 16:06

0

First , Check you createated a query or not.Then variable p is not defined inside the function.use query selector all for return all the elements in the query.

answered Nov 20 '21 at 16:06

Kamalesh

1
1

1

This should be a comment, not an answer. – AbsoluteBeginner Nov 20 '21 at 16:07

score 0 · Answer 4 · answered Nov 20 '21 at 16:22

0

querySelector returns an array that you can iterate with forEach. so you just need to change querySelector to querySelectorAll.

  const p = document.querySelectorAll('.myP')
  p.forEach((element) => (element.innerText = "Thank You!!!!"));

answered Nov 20 '21 at 16:22

Maik Lowrey

15,957
6
40
79

Change Paragram using DOM manupulations

4 Answers4