取消隱藏按鈕clic上的h1標簽-有解無憂

我正在創建一個待辦事項串列。我想在單擊按鈕時取消隱藏 h1 標簽。但它不起作用。任何人都可以看看這段代碼。

let a;

// #create is a button. I want to unhide the h1 tag on the click of this button.
let create = document.querySelector("#create");

// #box is the h1 tag. I want to unhide this h1 tag on the click of #create.
let box = document.querySelector("#box");


create.onclick = ()=>{
    
// I not only want to unhide box but also want to hide create button
create.style.display = "none";

    // Asking the user how many list does they have.
    a = prompt("Enter the number of list you have");

    // if 'a' is 1, I only want to unhide one h1 tag. So unhiding box if a is equal to 1.
    switch (a){
        case a==1:
            box.style.display = "block";
    }
}

在這里，此代碼不起作用。一切正常。它隱藏了按鈕，它詢問用戶他們有多少串列以及所有串列。但它不是隱藏框。它也沒有顯示任何錯誤。這段代碼有什么問題。我怎樣才能取消隱藏框。誰能告訴我我應該在這里做什么。

HTML：

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="todolist.css">
</head>

<body align="center">
    <button id="create">create</button>
    <script src="todolist.js"></script>
    <p>
        <h1 id="box" style="display: none;">
            1
        </h1>

        <h1 id="box1" style="display: none;">
            2
        </h1>
       <h1 id="box2" style="display: none;">
            3
       </h1>
       <h1 id="box3" style="display: none;">
            4
       </h1>
       <h1 id="box4" style="display: none;">
            5
       </h1>
       <h1 id="box5" style="display: none;">
            6
       </h1>
       <h1 id="box6" style="display: none;">
            7
       </h1>
       <h1 id="box7" style="display: none;">
            8
       </h1>
       <h1 id="box8" style="display: none;">
            9
       </h1>
       <h1 id="box9"style="display: none;">
           10
       </h1>

</p>

uj5u.com熱心網友回復：

您對開關盒的使用不正確。您需要更改case a==1:為case "1":

let a;

// #create is a button. I want to unhide the h1 tag on the click of this button.
let create = document.querySelector("#create");

// #box is the h1 tag. I want to unhide this h1 tag on the click of #create.
let box = document.querySelector("#box");


create.onclick = () => {

  // I not only want to unhide box but also want to hide create button
  create.style.display = "none";

  // Asking the user how many list does they have.
  a = prompt("Enter the number of list you have");
    
  // if 'a' is 1, I only want to unhide one h1 tag. So unhiding box if a is equal to 1.
  switch (a) {
    case "1":
      box.style.display = "block";
  }
}

<button id="create">create</button>
<p>
  <h1 id="box" style="display: none;">
    1
  </h1>

  <h1 id="box1" style="display: none;">
    2
  </h1>
  <h1 id="box2" style="display: none;">
    3
  </h1>
  <h1 id="box3" style="display: none;">
    4
  </h1>
  <h1 id="box4" style="display: none;">
    5
  </h1>
  <h1 id="box5" style="display: none;">
    6
  </h1>
  <h1 id="box6" style="display: none;">
    7
  </h1>
  <h1 id="box7" style="display: none;">
    8
  </h1>
  <h1 id="box8" style="display: none;">
    9
  </h1>
  <h1 id="box9" style="display: none;">
    10
  </h1>

</p>

uj5u.com熱心網友回復：

您的<script>標簽<script src="todolist.js"></script>應該比<p>HTML 中的標簽晚。

在您的代碼中，腳本在 DOM 渲染之前運行，您肯定無法#box通過let box = document.querySelector("#box").

順便說一句，我建議使用if而不是switch只有一個條件。

所以你的代碼可以是這樣的：

let a;

// #create is a button. I want to unhide the h1 tag on the click of this button.
let create = document.querySelector("#create");

// #box is the h1 tag. I want to unhide this h1 tag on the click of #create.
let box = document.querySelector("#box");


create.onclick = () => {

    // I not only want to unhide box but also want to hide create button
    create.style.display = "none";

    // Asking the user how many list does they have.
    a = prompt("Enter the number of list you have");

    // if 'a' is 1, I only want to unhide one h1 tag. So unhiding box if a is equal to 1.
    if (a == 1) {
        box.style.display = "block";
    }
}

HTML：

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="todolist.css">
</head>

<body align="center">
    <button id="create">create</button>
    <h1 id="box" style="display: none;">
        1
    </h1>
    <h1 id="box1" style="display: none;">
        2
    </h1>
    <h1 id="box2" style="display: none;">
        3
    </h1>
    <h1 id="box3" style="display: none;">
        4
    </h1>
    <h1 id="box4" style="display: none;">
        5
    </h1>
    <h1 id="box5" style="display: none;">
        6
    </h1>
    <h1 id="box6" style="display: none;">
        7
    </h1>
    <h1 id="box7" style="display: none;">
        8
    </h1>
    <h1 id="box8" style="display: none;">
        9
    </h1>
    <h1 id="box9" style="display: none;">
        10
    </h1>
    <script src="todolist.js"></script>
</body>

uj5u.com熱心網友回復：

假設您希望您的提示接受一個框 id，并顯示該框（即不僅僅是1），您可以：

更新您的 HTML，以便您使用id的資料屬性。您還可以洗掉行內樣式，并使用 CSS 類。
獲取所有 id 的串列，map用于遍歷框的節點串列并回傳一個 id 陣列。
當用戶輸入數字時，檢查 ids 陣列是否包含它。如果將一個show類添加到該特定框（通過其資料 id 標識它），否則記錄錯誤。

const create = document.querySelector("#create");
create.addEventListener('click', handleClick, false);

const boxes = document.querySelectorAll('.box');
const ids = [...boxes].map(box => box.dataset.id);

function handleClick() {
  create.style.display = "none";
  const id = prompt('Enter the number of list you have');
  if (ids.includes(id)) {
    const selector = `.box[data-id="${id}"]`;
    const box = document.querySelector(selector);
    box.classList.add('show');
  } else {
    console.log('No list for that id');
  }
}

.box { display: none; }
.show { display: block; }

<button id="create">create</button>
<div class="boxes">
  <h1 data-id="1" class="box">1</h1>
  <h1 data-id="2" class="box">2</h1>
  <h1 data-id="3" class="box">3</h1>
  <h1 data-id="4" class="box">4</h1>
  <h1 data-id="5" class="box">5</h1>
</p>

附加檔案

模板/字串文字
傳播語法

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474059.html

標籤：javascript html

上一篇：如何將HTML頁面垂直分成4個部分

下一篇：您將如何使用JS創建一個按鈕來格式化中的文本？