Question 296528 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make a div appear when I type something

I want to make a thing so when I type the word "plz" into a input, a div box will appear. But I can’t quite figure it out. I think it has something to do with javascript.

My code is

<html>
  
  <style>
    
    .boxR{
      
        width: 350px;
        height: 350px;
        background-color:black;
        color:red;
        font-size:100px;
        font-weight:700;
        visibility:hidden;
      
    }
    
  </style>
  <body>
    
    <center>
      
          <br>
      
          <div class = "boxR"><br>hello</div>
          
          <input id = "test">
      
    </center>
    
    <script>
    
    while(true){
      
      sleep(10)
      
      if(document.getElementById("test").value == "plz"){
        document.getElementById("boxR").visibility = visible
      }}
      
    </script>
    

    
  </body>
</html>

I don’t know what I did wrong?

Tags:

3

Answers


  1. 0

    At

    if(document.getElementById("test").value == "plz"){
        document.getElementById("boxR").visibility = visible
}}

    You didn’t set the style attribute visiblity to visible. Change the document.getElementById("boxR").visibility = visible to document.getElementById("boxR").style.visibility = visible

    Changing any element’s style in JavaScript, you must reference it like this:
    element.style.attribute = value

    Login or Signup to reply.
  2. 0

    I add sample code below.

    const inputElement = document.getElementById("test");
inputElement.addEventListener("keyup", (e) => {
  const inputValue = e.target.value;
  if (inputValue === "plz") {
    document.querySelector(".boxR").style.visibility = "visible";
  } else {
    document.querySelector(".boxR").style.visibility = "hidden";
  }
});
     .boxR {
  width: 350px;
  height: 150px;
  background-color: black;
  color: red;
  font-size: 100px;
  font-weight: 700;
  visibility: hidden;
}
    <div class="boxR">hello</div>
<input id="test" />
    Login or Signup to reply.
  3. 0

    I’ve created a snippet that demonstrates the desired behavior.

    One of your problems was with not putting quotes around "visible". Another one was in trying to call sleep, which you can’t do because JavaScript is single-threaded and thus this would lock up the browser.

    //while(true){
      
//      sleep(10)
//}
document.querySelector("input").addEventListener("keyup", (e) => {
//  console.log("key");
  if (e.target.value.includes("plz")) {
    document.querySelector("div").classList.remove("invis");
  } else document.querySelector("div").classList.add("invis");
});

      if(document.getElementById("test").value == "plz"){
        document.getElementById("boxR").visibility = "visible"
      }
        .boxR{
      
        width: 350px;
        height: 350px;
        background-color:black;
        color:red;
        font-size:100px;
        font-weight:700;
      
    }

.invis {
  visibility : hidden;
}
    <html>
  
 
  <body>
    
    <center>
      
          <br>
      
          <div class = "boxR invis">
          <br>hello
          </div>
          
          <input id = "test" >
      
    </center>
    

    
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search