创建另一个按钮的按钮？

时间：2021-07-05 16:59:58

标签： javascript html frontend

我正在尝试创建一个“查看更多”按钮，该按钮仅在单击另一个按钮后才会出现。我在网上找不到任何关于它的内容。

该站点只是一个带有按钮的cat API，它会随机生成一张猫图片，但我想要一个按钮，它会出现在页面底部以生成另一张图片。我的问题是，在单击第一个按钮之前，我无法使按钮不可见。

let generate_btn =  document.querySelector(".generate_btn, see_more");

generate_btn.addEventListener("click", fetchPics);

function fetchPics() {

fetch('https://api.thecatapi.com/v1/images/search')
    .then(response => response.json())
    .then((data) => {
        let catsImgUrl = data[0].url

        let catsImgElement = document.createElement("img")
        catsImgElement.setAttribute('src', `${catsImgUrl}`)
        catsImgElement.classList.add("showcase")

        let catsImg = document.querySelector(".catsImg")
        catsImg.appendChild(catsImgElement)

    })
    .catch((err => console.log(err)))
};
<!doctype html>
    <html>
    <head>
        <title>CatHub | Random Cat Generator</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    
</head>
<body class="jumbotron">
   <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-brand dark">
      <div class="container-fluid">
        <img class="navbar-brand" src="../images/LogoMakr-6dBdy9.png" width="150" height="57"></img>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="main-content">
<h1>Welcome to CatHub, wanna see some cats?</h1>
<button type="button" class="btn btn-danger btn-grad generate_btn">Yes!</button>
<button type="button" class="btn btn-danger btn-grad generate_btn see_more">Show more</button>
</div>
<div class="catsImg main-content"></div>

<style>
.showcase {
   width: 60%;
   align-items: center;
   justify-content: center;
   margin-bottom: 10%;
}
</style>
<script src="../js/script.js"></script>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

使用 CSS 隐藏按钮，然后在 .generate_btn 按钮上添加一个事件侦听器，用于选择另一个按钮并将其显示样式属性设置为 block。

另外，请注意 querySelector(".generate_btn, see_more") 只选择“是！”按钮，因为 querySelector 只选择第一个元素。相反，使用 querySelectorAll 并循环遍历数组。

let generate_btn = document.querySelectorAll(".generate_btn, see_more");

generate_btn.forEach(e => e.addEventListener("click", fetchPics));

function fetchPics() {

  fetch('https://api.thecatapi.com/v1/images/search')
    .then(response => response.json())
    .then((data) => {
      let catsImgUrl = data[0].url

      let catsImgElement = document.createElement("img")
      catsImgElement.setAttribute('src', `${catsImgUrl}`)
      catsImgElement.classList.add("showcase")

      let catsImg = document.querySelector(".catsImg")
      catsImg.appendChild(catsImgElement)

    })
    .catch((err => console.log(err)))
};

document.querySelector('.generate_btn').addEventListener('click', function() {
  this.style.display = "none";
  document.querySelector('.see_more').style.display = "block";
})
.see_more {
  display: none;
}
<!doctype html>
<html>

<head>
  <title>CatHub | Random Cat Generator</title>
  <link rel="stylesheet" href="../css/bootstrap.css">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body class="jumbotron">
  <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-brand dark">
    <div class="container-fluid">
      <img class="navbar-brand" src="../images/LogoMakr-6dBdy9.png" width="150" height="57"></img>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
        </ul>
      </div>
  </nav>

  <div class="main-content">
    <h1>Welcome to CatHub, wanna see some cats?</h1>
    <button type="button" class="btn btn-danger btn-grad generate_btn">Yes!</button>
    <button type="button" class="btn btn-danger btn-grad generate_btn see_more">Show more</button>
  </div>
  <div class="catsImg main-content"></div>

  <style>
    .showcase {
      width: 60%;
      align-items: center;
      justify-content: center;
      margin-bottom: 10%;
    }
  </style>
  <script src="../js/script.js"></script>
</body>

</html>

答案 1 :(得分：0)

let generate_btn = document.querySelector(".generate_btn");

generate_btn.addEventListener("click", fetchPics);

function fetchPics() {

  document.querySelector(".see_more").style.display = 'inline-block';


  fetch('https://api.thecatapi.com/v1/images/search')
    .then(response => response.json())
    .then((data) => {
      let catsImgUrl = data[0].url

      let catsImgElement = document.createElement("img")
      catsImgElement.setAttribute('src', `${catsImgUrl}`)
      catsImgElement.classList.add("showcase")

      let catsImg = document.querySelector(".catsImg")
      catsImg.appendChild(catsImgElement)

    })
    .catch((err => console.log(err)))
};
.see_more {
  display: none;
}
<!doctype html>
<html>

<head>
  <title>CatHub | Random Cat Generator</title>
  <link rel="stylesheet" href="../css/bootstrap.css">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body class="jumbotron">
  <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-brand dark">
    <div class="container-fluid">
      <img class="navbar-brand" src="../images/LogoMakr-6dBdy9.png" width="150" height="57"></img>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="main-content">
    <h1>Welcome to CatHub, wanna see some cats?</h1>
    <button type="button" class="btn btn-danger btn-grad generate_btn">Yes!</button>
    <button type="button" class="btn btn-danger btn-grad generate_btn see_more">Show more</button>
  </div>
  <div class="catsImg main-content"></div>

  <style>
    .showcase {
      width: 60%;
      align-items: center;
      justify-content: center;
      margin-bottom: 10%;
    }
  </style>
  <script src="../js/script.js"></script>
</body>

</html>

答案 2 :(得分：0)

一些问题：

  • 选择器 .generate_btn, see_more 只会选择一个按钮。 see_more 不会选择任何内容，因为它前面没有 .，因此它正在寻找具有该标签名称的元素。

  • 使用 querySelector 您仍然只能选择一个元素，即使选择器会匹配多个元素

  • addEventListener 可以在一个 DOM 元素上调用。所以出于这个原因和上述原因，你没有听到第二个按钮的点击。

  • style 标签最好放在文档的 head 部分。

如果您在第一张图像加载后更改其标题，则无需使用两个按钮，这会容易得多。最好等到图像的 load 事件触发后再更改此标题：

// Only one button:
let generate_btn =  document.querySelector(".generate_btn");
generate_btn.addEventListener("click", fetchPics);

function fetchPics() {
    fetch('https://api.thecatapi.com/v1/images/search')
        .then(response => response.json())
        .then((data) => {
            let catsImgUrl = data[0].url;
            let catsImgElement = document.createElement("img");
            // Add this:
            catsImgElement.onload = () => generate_btn.textContent = "Show more...";
            catsImgElement.setAttribute('src', `${catsImgUrl}`);
            catsImgElement.classList.add("showcase");
            let catsImg = document.querySelector(".catsImg");
            catsImg.appendChild(catsImgElement);
        })
        .catch(console.log)
};
.showcase {
   width: 60%;
   align-items: center;
   justify-content: center;
   margin-bottom: 10%;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    

   <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-brand dark">
      <div class="container-fluid">
        <img class="navbar-brand" src="../images/LogoMakr-6dBdy9.png" width="150" height="57"></img>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="main-content">
<h1>Welcome to CatHub, wanna see some cats?</h1>
<button type="button" class="btn btn-danger btn-grad generate_btn">Yes!</button>
</div>
<div class="catsImg main-content"></div>

相关问题
最新问题