'unhiding a h1 tag on the clic of a button

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>
javascripthtml


Solution 1:[1]

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>

Solution 2:[2]

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

In your codes, script runs before the DOM get rendering, surely you can't get the element #box by let box = document.querySelector("#box").

BTW, I suggest to use if rather than switch while there is only one condition.

So your code can be like this:

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>

Solution 3:[3]

Assuming that you want your prompt to accept a box id, and to show that box (ie. not just 1), you can:

  1. Update your HTML so that you're using a data attribute for the id. You can also remove the inline style, and use a CSS class.

  2. Get a list of all the ids using map to iterate over the nodelist of boxes and return an array of ids.

  3. When the user inputs a number check to see the ids array includes it. If it is add a show class to that particular box (identifying it by its data id), otherwise log an error.

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>

Additional documentation

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 abney317
Solution 2
Solution 3 Andy

Related Questions