检查一个文本区域是否为空，如果不是，则删除模态。

Question

我尝试创建一个包含文本区域的模态，但没有按计划进行。

我有这个模态。

<div id="myModal" class="modal">

它包含了文本区域和按钮。

 <div class="modal-content"> 
   <p>Write down a memory</p>
   <textarea id="txt"></textarea>
   <button class="btn">send</button>
 </div>
 </div>

我想让这个模态在你打开页面的时候出现，我做到了。下一步是检测textarea是否为空。如果是空的，我想让发送按钮什么都不做，如果在textarea中写了文字，我想让模态关闭并在页面上显示一条信息。

window.addEventListener('load', 
function() {
var modal = document.getElementById("myModal");

var text;
var content = document.getElementById('txt').value;
modal.style.display = "block";

function send(){
if(content.length < 1){
 console.log ("empty");
}
 else {
  text = "thank you";
  $(document).on("click",".btn", function(){
    $('#myModal').hide();
    });
   }
document.getElementById("demo").innerHTML = txt; 
}
});


<div class="message" id="demo"><p></p></div>

我做错了什么？

Answer 1

你把东西混在一起了。你需要考虑一下你的代码中的一些注意事项。

• 首先，你需要考虑你的代码中的一些注意事项。请避免同时使用plain javascript和jQuery。 在同一个函数中同时使用plain javascript和jQuery是不太明智和合适的。所以如果你尝试使用jQuery，请坚持使用它的规则和选择器。
• 你定义了一个叫做 send() 在您点击发送后，做一些工作 button 但从不引用. 请记住，要调用一个函数，你总是需要在某个地方用括号来调用它。在你的特殊情况下，最好的方法是为你的按钮设置一个事件监听器，以确保每次它被点击时都会调用你的函数。你只是想这样做，但却用错了地方。
• 正如 @full-stack 指出的那样。您在javascript选择器中得到了错误的元素。. 因此，由于不存在id为 txt 存在于你的DOM中，你将面临一个引用错误。

所以，注意到这些要点后，你的最终代码应该是这样的。

$(document).on("click", ".btn", function() {
  var modal = $("#myModal");
  var content = $('#addMemory').val();

  if (content.length < 1) {
    console.log("empty");
  } else {
    modal.hide();
    console.clear();
    $("#demo p")[0].innerHTML = "thank you";
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="myModal" class="modal">
  <div class="modal-content">
    <p>Write down a memory</p>
    <textarea id="addMemory"></textarea>
    <button class="btn">send</button>
  </div>
</div>

<div class="message" id="demo">
  <p></p>
</div>

Answer 2

1) 正如评论中所指出的, document.getElementById('txt') 不存在，你需要用 document.getElementById('addMemory').

2) 在你放的地方，textBox的值只保存一次，在加载时保存，但你想在用户点击 "发送 "按钮时检查它，所以你必须把它移到发送函数里面。

function send() {
    var content = document.getElementById('addMemory').value;
    // [...]
}

3) 如果你不在任何地方设置它，你的send函数永远不会被调用， 所以你需要在按钮被点击时调用它。

<button class="btn" onclick="send()">send</button>

4) 当你在发送函数中时，按钮已经被点击了，所以你不需要在文档上添加一个点击监听器，你已经在里面了，你需要关闭弹出窗口或者不关闭。

function send(){
    var content = document.getElementById('addMemory').value;
    if(content.length < 1){
        console.log ("empty");
    }
   else {
       text = "thank you";
       $('#myModal').hide();
   }
}

5）最后，你调用 document.getElementById("demo").innerHTML = txt; 在send函数之外，所以它只会在加载时被调用一次，此外还有 txt 不存在。我猜你想在隐藏模式时保存它，所以我们必须把它放在发送函数里面。

function send(){
    var content = document.getElementById('addMemory').value;
    if(content.length < 1){
        console.log ("empty");
    }
    else {
       text = "thank you";
       $('#myModal').hide();
       document.getElementById("demo").innerHTML = content; 
    }
}

6) 由于发送函数会在用户点击按钮时被调用，你不再需要加载事件监听器了。

这就是你的想法了。https:/jsfiddle.net6gu71sj2