时间戳

首页 > 解决方案 > 创建另一个按钮的按钮？

javascript - 创建另一个按钮的按钮？

问题描述

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

该站点只是一个带有按钮的猫 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>

标签： javascripthtmlfrontend

解决方案

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>

推荐阅读