CODEWITHSUNDEEP
javascripthtml
Lauro235
Lauro235

Reputation: 332

Searching for dynamically created elements in the console

I'm curious why the getDiv() wrapper function works, but not getDiv1().

Say I create an element dynamically, then I decide I want to search for the element later in the script with document.querySelector().. Why are these two code samples giving two different console results?

I always like to be able to reuse functions where possible. Is this something that can be done? Not sure why the console isn't correctly picking up the element.

Help appreciated, thanks

// Dynamically created dom elements should be searched with wrapper / working
const getDiv = () => {
let div = document.querySelector(".text-wrapper");
return div
}

// Not working (why)
function getDiv1(selector) {
let element = `${selector}`;
return element
}

function timer() {
  for(i = 0; i < sampleArray.length; i++) {
    console.log(getDiv1(`document.querySelector(".text-wrapper")`));
  }
}


const wrapper = document.querySelector('.wrapper')
const buttonCreate = document.querySelector('.create-element');
const buttonAnimate = document.querySelector('.animation');
buttonCreate.addEventListener('click', createElement);
buttonAnimate.addEventListener('click', timer);

let i = 0;
let j = 0;

let sampleArray = ["Just", "another", "cool", "heading"];

function createElement() {
  // debugger
    const newDiv = document.createElement("div");
    newDiv.classList.add("text-wrapper");
    wrapper.insertAdjacentElement("afterbegin", newDiv);
    let word = () => {sampleArray.map((word, i) => {
      newDiv.innerHTML += `<span class="word${i + 1}">${word}</span>`;
    })
  };
    word();
    return
}

// Dynamically created dom elements should be searched with wrapper / working
const getDiv = () => {
let div = document.querySelector(".text-wrapper");
return div
}

// Not working (why)
function getDiv1(selector) {
let element = `${selector}`;
return element
}

function timer() {
  for(i = 0; i < sampleArray.length; i++) {
    console.log(getDiv1(`document.querySelector(".text-wrapper")`));
  }
}
html {
  box-sizing: border-box;
}

*,*::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}


.wrapper {
  width: 100%;
  background-color: #333;
  color: #FFA;
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: row;
  gap: 10rem;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
}

.text-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  gap: 3rem;
  flex-direction: column;
  justify-content: center;
  justify-content: space-around;
}

.button {
  font-size: 3rem;
  border-radius: 6px;
  background-color: #47cefa;
}

.button:hover {
  cursor: pointer;
  background-color: #BCEF4D;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Create Element</title>
</head>
<body>
  <section class="wrapper">
    <button class="button create-element">Create Element</button>
    <button class="button animation">Start Animation</button>
  </section>
  <script src="./main.js"></script>
</body>
</html>

Upvotes: 0

Views: 278

Answers (1)

nem0z
nem0z

Reputation: 1123

Try this :

function getDivBySelector(selector) {
    return document.querySelector(selector);
}

Then

let element = getDivBySelector(".text-wrapper");
console.log(element);

Upvotes: 1

Related Questions