How to change display value on CSS with JS

Question

I'm trying to get user's input with an input tag and when the user types a specific word it will change the display on css so it'll make it appear. Seems like what I tried is wrong. Does anyone know how I can make this work?

var input = document.getElementById("ter").value;
if (input == "ls") {
  document.getElementById("pages").style.display = "block";
}

...
div#main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  text-align: center;
}

div#pages {
  display: none;
}

input {
  background: transparent;
  border: none;
  color: #c0c0c0;
  width: 50%;
  height: 30%;
  margin-left: 10px;
}

input:focus {
  outline: none;
}

p#term-text {
  font-weight: bold;
  color: #00ff00;
}
...

...
    <div id="main">
      <p id="term-text">usr@test:~<input type="text" name="terminal" id="ter"></p>
      <div id="pages">
        <p>If user types ls on input this will appear</p>
      </div>
    </div>
...

Ele · Accepted Answer · 2018-02-20 20:25:46Z

You need to bind an event to capture what user is typing.

I.e: Event input

document.getElementById("ter").addEventListener('input', function() {...});

document.getElementById("ter").addEventListener('input', function() {
  var input = this.value;
  if (input == "ls") {
    document.getElementById("pages").style.display = "block";
  }
});

... div#main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  text-align: center;
}

div#pages {
  display: none;
}

input {
  background: transparent;
  border: none;
  color: #c0c0c0;
  width: 50%;
  height: 30%;
  margin-left: 10px;
}

input:focus {
  outline: none;
}

p#term-text {
  font-weight: bold;
  color: #00ff00;
}

...

...
<div id="main">
  <p id="term-text">usr@test:~<input type="text" name="terminal" id="ter"></p>
  <div id="pages">
    <p>If user types ls on input this will appear</p>
  </div>
</div>
...

If user press enter

document.getElementById("ter").addEventListener('keydown', function(e) {  
  var key = e.which || e.keyCode;
  if (key === 13) {
    document.getElementById("pages").style.display = "block";
  }
});

... div#main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  text-align: center;
}

div#pages {
  display: none;
}

input {
  background: transparent;
  border: none;
  color: #c0c0c0;
  width: 50%;
  height: 30%;
  margin-left: 10px;
}

input:focus {
  outline: none;
}

p#term-text {
  font-weight: bold;
  color: #00ff00;
}

...

...
<div id="main">
  <p id="term-text">usr@test:~<input placeholder="Click here and press enter!" type="text" name="terminal" id="ter"></p>
  <div id="pages">
    <p>If user types ls on input this will appear</p>
  </div>
</div>
...

Resource

EventTarget.addEventListener()

It works! I'll probably have to learn about Events. Do you know how we can edit the js so that it'll change the display to block when user presses enter?

Alex · Accepted Answer · 2018-02-20 20:33:26Z

0

The reason why it isn't working for you is because you're not asking javascript to do something based on user input. You need to use an Event Listener in order to collect user interaction.

In your case, I would do something like this:

var inputBox = document.getElementById("ter");

inputBox.addEventListener("keyup", function(){
  if (inputBox.value == "ls") {
    document.getElementById("pages").style.display = "block";
  }
}, false);

answered Feb 20, 2018 at 20:33

Alex

499 bronze badges

Collectives™ on Stack Overflow

How to change display value on CSS with JS

2 Answers 2

Resource

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Resource

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related