Can't find where am I wrong-CodePudding

I have some kind of problem. I was making some simple decorative terminal. The first part of JS code is working.

<head>
  <style>
    body {
      font-family:'Lucida Console', monospace;
      color: white;
    }

    #terminal-body{
      border: 2px solid black;
      border-radius: 5px;
    }

    #terminal-top {
      background-color: #1a1a1a;
    }

    .cross-button {
      padding: 0px 15px 0px 15px;
      margin: 10px;
      background-color: red;
      border: 2px solid darkred;
      border-radius: 3px;
      color: white;
    }

    .cross-button:hover {
      background-color:  rgb(255, 101, 101);
      border: 2px solid rgb(133, 54, 54);
      color: whitesmoke;
    }

    .cross-button:active {
      background-color:  white;
      border: 2px solid whitesmoke;
      color: red;
    }

    #terminal-text{
      background: repeating-linear-gradient(
        to bottom,
      #090909,
      #090909 5px,
      #1a1a1a 5px,
      #1a1a1a 10px
      );
      padding: 10px;
      height: 400px;
      overflow: scroll;
    }

    #terminal-input {
      background-color: #090909;
      height: 30px;
      position: relative;
    }

    .input-button {
      position: absolute;
      top: 0;
      right: 0px;
      z-index: 2;
      border: none;
      background: #1a1a1a;
      top: 2px;
      height: 100%;
      cursor: pointer;
      width: 15%;
      color: white;
      transform: translateX(2px);
      font-family:'Lucida Console', monospace;
    }

    #input-field {
      border: 0px;
      margin: 0px;
      padding-left: 10px;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0);
      outline: none;  
      color: white;
      font-family:'Lucida Console', monospace;
    }

    .user {
      color: blue;
    }

    a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="terminal-body">
    <div id="terminal-top">
      <button >✕</button>
    </div>
    <div id="terminal-text">
      <a id="calendar" href="javascript:;">> Open 1</a><br>
      <a id="memo" href="javascript:;">> Open 2</a><br>
      <a id="notes" href="javascript:;">> Open 3</a><br>
    </div>
    <div id="terminal-input">
      <input id="input-field" type="text" placeholder="Input the text..."><button >Enter</button>
    </div>
  </div>

  <script>
    let textNode = document.querySelector(`#terminal-text`);
    let inputButton = document.querySelector(`#input-button`);
    let fieldInput = document.querySelector(`#input-field`);
    let calendarNode = document.querySelector(`#calendar`);
    let memoNode = document.querySelector(`#memo`);
    let notesNode = document.querySelector(`#notes`);

    calendarNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 1`;
    });

    memoNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 2`;
    });

    notesNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 3`;
    });

    inputButton.addEventListener(`click`, function() {
      if (fieldInput.value == `Open 1`) {
        textNode.innerHTML  = `<p><span >Open 1</span></p><br>`;
      } else if (fieldInput.value == `Open 2`) {
        textNode.innerHTML  = `<p><span >Open 2</span></p><br>`;
      } else if (fieldInput.value == `Open 3`) {
        textNode.innerHTML  = `<p><span >Open 3</span></p><br>`;
      } else {
        textNode.innerHTML  = `<p><span >`   fieldInput.value   `</span></p><br>`;
      }
    });
    
  </script>
</body>

When I click , the text appears in input field. But when I need to enter the text, using the enter button, it isn't working. I'm using only things, that I understand, where is the problem?

CodePudding user response：

You have a invalid querySelector...

It should be this based on your HTML

let inputButton = document.querySelector('.input-button');

CodePudding user response：

You specified a className .input-button, but searching for id #input-button.
This might be solved with document.querySelector('.input-button').
However, it is probably better to use id instead of class, because getting
element by class has a little unpredictable result.

<head>
  <style>
    body {
      font-family:'Lucida Console', monospace;
      color: white;
    }

    #terminal-body{
      border: 2px solid black;
      border-radius: 5px;
    }

    #terminal-top {
      background-color: #1a1a1a;
    }

    .cross-button {
      padding: 0px 15px 0px 15px;
      margin: 10px;
      background-color: red;
      border: 2px solid darkred;
      border-radius: 3px;
      color: white;
    }

    .cross-button:hover {
      background-color:  rgb(255, 101, 101);
      border: 2px solid rgb(133, 54, 54);
      color: whitesmoke;
    }

    .cross-button:active {
      background-color:  white;
      border: 2px solid whitesmoke;
      color: red;
    }

    #terminal-text{
      background: repeating-linear-gradient(
        to bottom,
      #090909,
      #090909 5px,
      #1a1a1a 5px,
      #1a1a1a 10px
      );
      padding: 10px;
      height: 400px;
      overflow: scroll;
    }

    #terminal-input {
      background-color: #090909;
      height: 30px;
      position: relative;
    }

    #input-button {
      position: absolute;
      top: 0;
      right: 0px;
      z-index: 2;
      border: none;
      background: #1a1a1a;
      top: 2px;
      height: 100%;
      cursor: pointer;
      width: 15%;
      color: white;
      transform: translateX(2px);
      font-family:'Lucida Console', monospace;
    }

    #input-field {
      border: 0px;
      margin: 0px;
      padding-left: 10px;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0);
      outline: none;  
      color: white;
      font-family:'Lucida Console', monospace;
    }

    .user {
      color: blue;
    }

    a {
      color: white;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="terminal-body">
    <div id="terminal-top">
      <button >✕</button>
    </div>
    <div id="terminal-text">
      <a id="calendar" href="javascript:;">> Open 1</a><br>
      <a id="memo" href="javascript:;">> Open 2</a><br>
      <a id="notes" href="javascript:;">> Open 3</a><br>
    </div>
    <div id="terminal-input">
      <input id="input-field" type="text" placeholder="Input the text..."><button id="input-button">Enter</button>
    </div>
  </div>

  <script>
    let textNode = document.querySelector(`#terminal-text`);
    let inputButton = document.querySelector(`#input-button`);
    let fieldInput = document.querySelector(`#input-field`);
    let calendarNode = document.querySelector(`#calendar`);
    let memoNode = document.querySelector(`#memo`);
    let notesNode = document.querySelector(`#notes`);

    calendarNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 1`;
    });

    memoNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 2`;
    });

    notesNode.addEventListener(`click`, function () {
      fieldInput.value = `Open 3`;
    });

    inputButton.addEventListener(`click`, function() {
      if (fieldInput.value == `Open 1`) {
        textNode.innerHTML  = `<p><span >Open 1</span></p><br>`;
      } else if (fieldInput.value == `Open 2`) {
        textNode.innerHTML  = `<p><span >Open 2</span></p><br>`;
      } else if (fieldInput.value == `Open 3`) {
        textNode.innerHTML  = `<p><span >Open 3</span></p><br>`;
      } else {
        textNode.innerHTML  = `<p><span >`   fieldInput.value   `</span></p><br>`;
      }
    });
    
  </script>
</body>