检查文本区域是否为空，如果不是删除模式

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 是否为空。如果为空，我希望发送按钮不执行任何操作，如果在文本区域中写入文本，我希望模式关闭并在页面上显示一条消息。

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

1) 在 cmets 中发现，document.getElementById('txt') 不存在，您需要将其替换为 document.getElementById('addMemory')。

2）你把它放在哪里，textBox的值在加载时只保存一次，但是你想在用户点击“发送”按钮时检查它，所以你必须将它移动到发送函数中：

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

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

<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;，因此它只会在加载时调用一次，此外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.net/6gu71sj2/

Answer 2

你在这里把事情混在一起了。您需要考虑有关代码的一些注释。

• 首先，请避免同时使用纯javascript和jQuery。这不是很明智，适合在同一个函数中同时使用纯javascript和jQuery。所以如果你尝试使用 jQuery，请坚持使用它的规则和选择器。
• 您正在定义一个名为 send() 的函数，以便在您单击发送 button 后执行一些工作，但从不调用它。请记住调用一个函数，你总是需要在某个地方用括号调用它。在您的特定情况下执行此操作的最佳方法是为您的按钮设置一个事件侦听器，以确保每次单击它时都会调用您的函数。你只是想这样做，但在错误的地方。
• 正如@full-stack 指出的那样，您在 javascript 选择器中获取了错误的元素。因此，由于您的 DOM 中不存在 ID 为 txt 的元素，您将面临引用错误。

因此，注意到这些点后，您的最终代码应该是这样的：

$(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>