JavaScript - 获取 Div 内容的值 - 内容被错误的字符串替换

Question

链接到jsFiddle .

如果textarea为空，内容应为“你必须给我讲个笑话!”使用 JavaScript。

相反，即使 textarea为空，内容仍在更改为“你的笑话有趣吗？”

相关代码:

HTML

<div class="row"><!--third row -->

  <div class="col-2 joker">
      <img src="/joker.png"/>
      <p id="jokerDialogue">Tell me a joke</p>
  </div>

  <div class="col-2">
      <table>

      <tr>
      <td>Joke:</td>
      </tr>

      <tr>
      <td>
      <textarea id="jokeQuestion" type="string" min="1" max="24" size="24"> 
      </textarea>
      </td>
      </tr> 

      <tr>
      <td>
      <input id="submit-joke" type="button" value="submit" class="js-button" 
      onclick="joker()">
      </td>
      </tr>

      </table>
  </form>
  </div>

  <div class="col-8">             
  </div>

</div>

Javascript

function joker() {

   let content = document.getElementById("jokeQuestion");
   if (content != "") {
      document.getElementById("jokerDialogue").innerHTML = "Was your joke funny?";
   }
   else if (content == "") {
      document.getElementById("jokerDialogue").innerHTML = "You must tell me a joke!";
   }
}

如您所见，我正在尝试创建一个变量 content并说它是用户在 textarea 中输入的内容ID 为 jokeQuestion .

但即使 content为空白，<p> ID 为 "jokerDialogue"仍在更改为 "Was your joke funny?"

我认为if (content != "")意思是“如果内容不为空” - 那么为什么该函数返回“你的笑话有趣吗？”即使它是空白的？

Answer 1

您需要获取内容的值:

let content = document.getElementById("jokeQuestion").value;

现在您的代码将按预期工作。