装饰性终端Enter按钮点击无响应，请求排查问题

问题核心 #

你的Enter按钮点击无反应，根源是JS代码获取按钮的方式错误：

• HTML里的Enter按钮仅设置了class="input-button"，没有添加id="input-button"属性
• 但你用了document.querySelector(#input-button)（#是ID选择器）去获取元素，导致无法找到目标按钮，点击事件根本没绑定成功

修复步骤 #

把JS里获取按钮的代码，从：

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

修改为：

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

（.是类选择器，对应按钮的class属性）

修复后的完整代码 #

<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 class="cross-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 class="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 class="user">Open 1</span></p><br>`;
      } else if (fieldInput.value == `Open 2`) {
        textNode.innerHTML += `<p><span class="user">Open 2</span></p><br>`;
      } else if (fieldInput.value == `Open 3`) {
        textNode.innerHTML += `<p><span class="user">Open 3</span></p><br>`;
      } else {
        textNode.innerHTML += `<p><span class="user">` + fieldInput.value + `</span></p><br>`;
      }
    });
    
  </script>
</body>

内容的提问来源于stack exchange，提问作者IzeQ