trying to show re render the page when i click on the show details button-CodePudding

Hello guys i am new to this i am trying to re render my page any time i click on the show details buttons so i can show the name, height and gender of the sky wars characters i have tried initializing a variable to false and on click i tried changing the value to true but it did not work. please here is my code.

const containerEl = document.getElementById("container");
const list = document.createDocumentFragment();
const images = [
    "https://oyster.ignimgs.com/mediawiki/apis.ign.com/star-wars-episode-7/2/2d/Luke.jpg?width=1280",
    "https://images.immediate.co.uk/production/volatile/sites/3/2019/10/EP9-FF-001686-336e75b.jpg?quality=90&resize=980,654",
    "https://hips.hearstapps.com/digitalspyuk.cdnds.net/17/07/1487160686-r2-d2.jpg",
    "https://lumiere-a.akamaihd.net/v1/images/darth-vader-main_4560aff7.jpeg?region=0,67,1280,720",
    "https://www.costumerealm.com/wp-content/uploads/2019/12/51G4Jox9MlL._SX466_.jpg",
    "https://static.wikia.nocookie.net/starwars/images/e/eb/OwenCardTrader.png/revision/latest?cb=20171108050140",
    "https://static.wikia.nocookie.net/fanmade-works/images/8/8d/Beru_Lars.png/revision/latest/scale-to-width/360?cb=20200317025929",
    "https://static.wikia.nocookie.net/star-wars-canon-extended/images/2/23/R5.jpg/revision/latest?cb=20160123232521",
    "https://static.wikia.nocookie.net/starwars/images/0/00/BiggsHS-ANH.png/revision/latest?cb=20130305010406",
    "https://media.gq.com/photos/622919842677fb88bf480855/16:9/w_2143,h_1205,c_limit/Screen Shot 2022-03-09 at 4.15.50 PM.png"
]

const getData = async () => {
    const res = await fetch("https://swapi.dev/api/people");
    const resData = await res.json();
    const result = resData.results;
    console.log(result)
    main(result)
}

getData();

const main = (data) => {
    let isVisible = false;
    containerEl.innerHTML = "";
    data.map(({ gender, height, name }, i) => {
        const starWars = `
          <img  src=${images[i]}/>
          <button id="btn" >Show Details</button>
          <h1 >${isVisible ? name : ""}</h1>
          <h3>${isVisible ? gender : ""}</h3>
          <h3>${isVisible ? height : ""}</h3>
        `;
        const item = document.createElement("div");
        item.classList.add("items")
        item.innerHTML = starWars
        const btn = item.querySelector(".btn");
        btn.addEventListener("click", () => {
            isVisible = true
        })
        list.appendChild(item)
    })
    containerEl.append(list)
}



html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style/index.css" >
    <title>Star Wars</title>
  </head>
  <body>
    <!-- Write your implementation here -->
    <div id="container" >
    </div>
    <script src="./script/index.js"></script>
  </body>
</html>

CodePudding user response：

This approach is not possible. The string literals, such as ${isVisible ? name : ""} are evaluated at the time that your template item is created, so since you've set the isVisible is false, it will only ever produce an empty string.

Instead, generate your string template with the values and then use a class to toggle the visibility of the details.

const containerEl = document.getElementById("container");
const images = [
    "https://oyster.ignimgs.com/mediawiki/apis.ign.com/star-wars-episode-7/2/2d/Luke.jpg?width=1280",
    "https://images.immediate.co.uk/production/volatile/sites/3/2019/10/EP9-FF-001686-336e75b.jpg?quality=90&resize=980,654",
    "https://hips.hearstapps.com/digitalspyuk.cdnds.net/17/07/1487160686-r2-d2.jpg",
    "https://lumiere-a.akamaihd.net/v1/images/darth-vader-main_4560aff7.jpeg?region=0,67,1280,720",
    "https://www.costumerealm.com/wp-content/uploads/2019/12/51G4Jox9MlL._SX466_.jpg",
    "https://static.wikia.nocookie.net/starwars/images/e/eb/OwenCardTrader.png/revision/latest?cb=20171108050140",
    "https://static.wikia.nocookie.net/fanmade-works/images/8/8d/Beru_Lars.png/revision/latest/scale-to-width/360?cb=20200317025929",
    "https://static.wikia.nocookie.net/star-wars-canon-extended/images/2/23/R5.jpg/revision/latest?cb=20160123232521",
    "https://static.wikia.nocookie.net/starwars/images/0/00/BiggsHS-ANH.png/revision/latest?cb=20130305010406",
    "https://media.gq.com/photos/622919842677fb88bf480855/16:9/w_2143,h_1205,c_limit/Screen Shot 2022-03-09 at 4.15.50 PM.png"
]

async function getData () {
  const res = await fetch("https://swapi.dev/api/people");
  const resData = await res.json();
  return resData.results;
}

async function main () {
  const data = await getData();
  containerEl.innerHTML = "";
  const list = document.createElement("ul")
  
  data.map(({ gender, height, name }, i) => {
    const starWars = `
      <img  src=${images[i]}/>
      <button id="btn" >Show Details</button>
      <div >
        <h2 >${name}</h2>
        <h3>${gender}</h3>
        <h3>${height}</h3>
      </div>
    `;
    const item = document.createElement("li");
    item.classList.add("item", "hidden")
    item.innerHTML = starWars
    const btn = item.querySelector(".btn");
    btn.addEventListener("click", toggleVisibility)
    list.appendChild(item)
  })
  containerEl.append(list)
}

main()

function toggleVisibility(event) {
  const el = event.target.closest('.item')
  el.classList.toggle("hidden")
}

img {
  width: 100%;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  gap: 1rem;
}

li {
  border: 2px solid #ccc;
  border-radius: .5rem;
  overflow: hidden;
}

button {
  font-weight: bold;
  border: 0;
  background-color: #222;
  padding: .5rem .75rem;
  color: white;
}

.item {
  display: grid;
  width: 25rem;
  margin: auto;
}

.details {
  padding: 1rem;
}

.hidden .details {
  display: none;
}

<div id="container" ></div>