unhiding a h1 tag on the clic of a button-CodePudding

I am creating a to-do list. I want to unhide a h1 tag on the click of a button. But it is not working. could anyone take a look at this code.

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";
    }
}

Here this code is not working. Everything is working. It is hiding the button, It is asking the user how many list does they have and all. But It is not unhiding box. Also it is not showing any errors. What is wrong in this code. How can I unhide the box. Could anyone tell me what should i do here.

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>

CodePudding user response：

Your use of the switch case is incorrect. You need to change case a==1: to 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>

CodePudding user response：

Your <script> tag <script src="todolist.js"></script> should be put later than the <p> tag.