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

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>

我希望在您打开页面时出现此模式，我设法做到了。下一步是检测文本区域是否为空。如果为空，我希望发送按钮什么都不做，如果在文本区域中写入文本，我希望模式关闭并在页面上显示一条消息。

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 选择器 中获取了错误的元素。因此，由于您的 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>

Answer 2

1) 如评论中所述，document.getElementById('txt') 不存在，您需要将其替换为 document.getElementById('addMemory')。

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

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

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

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

4)当你在send函数中，那么按钮已经被点击了，所以你不需要在document上添加点击监听，你已经在里面了，你需要关闭弹窗与否。

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/

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

Check if a textarea is empty, if not remove modal

javascript

textarea