forEach in Array (in) Array JavaScript

Question

I want to search words in headlines of my posts and if it contains Names example: max or Marry, it should add Photo from them.

    var imageLocation = document.querySelectorAll(".summary"); // where Image should be added
    var headLines = document.querySelectorAll(".ecs-thumbnail");// where my Names are.
    var img = document.createElement("IMG");

   headlines.forEach(function (pos){
      const txt = pos.innerText;
      var max = txt.includes("max");
      var marry = txt.includes("marry");

    if(marry === true){
    pos.parentNode.childNodes[1].prepend(img);
    img.setAttribute("src", "https://dev.musikzentrum-hannover.de/wp-content/uploads/marry.png");
      } else if(max === true){
      pos.parentNode.childNodes[1].prepend(imgAus);
    img.setAttribute("src", "https://dev.musikzentrum-hannover.de/wp-content/uploads/max.png");
      }
    })

it Works, but I have many Headlines in the class and it adds Pictures just to the last Elements of class.

Not really sure what you mean. Not sure why you work innerText to get a value and decide upon that. Please try to re-phrase your question. — Aaron
– Aaron, Commented Apr 9, 2020 at 8:35
The if statement doesn't look right. if and else if test for the same condition, so the latter will never be executed; also you're overwriting the last inserted img DOM element over and over and keep adding it. — The Coprolal
– The Coprolal, Commented Apr 9, 2020 at 8:44
Not sure I got your question correctly. But it is highly likely that you need to move image creation to the iteratee function. var img = document.createElement("IMG"); should be created for each element if needed. — Yury Tarabanko
– Yury Tarabanko, Commented Apr 9, 2020 at 8:46

The Coprolal · Accepted Answer · 2020-04-09 08:51:16Z

1

There are several lines that don't look right. The if/else if test for the same condition. The same image DOM element is modified and prepended over and over again. The variable names don't match, headlines vs headLines. imageLocation is never used. This might work:

var headLines = document.querySelectorAll(".ecs-thumbnail");// where my Names are.

headLines.forEach(function (pos){
    let src;
    if(pos.innerText.includes("marry")){
        src = "https://dev.musikzentrum-hannover.de/wp-content/uploads/marry.png";
    } else if(pos.innerText.includes("max")) {
        src = "https://dev.musikzentrum-hannover.de/wp-content/uploads/max.png";
    }

    if(src) {
        let img = document.createElement("IMG");
        img.setAttribute("src", src);
        pos.parentNode.childNodes[1].prepend(img);
    }
});

answered Apr 9, 2020 at 8:51

The Coprolal

9968 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

forEach in Array (in) Array JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related