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

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

我有这样的想法：

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

window.addEventListener（'load'，
函数（）{
var modal=document.getElementById（“myModal”）；
var文本；
var content=document.getElementById（'txt'）.value；
modal.style.display=“块”；
函数send（）{
if（content.length<1）{
console.log（“空”）；
}
否则{
text=“谢谢”；
$（文档）。在（“单击“，”.btn“，函数（）上）{
$（'#myModal'）.hide（）；
});
}
document.getElementById（“demo”）.innerHTML=txt；
}
});

---

我做错了什么？

你把事情搞混了。你需要考虑你的代码中的一些注释。< /P>

• 首先，请避免同时使用普通javascript和jQuery。在同一个函数中同时使用普通javascript和jQuery不是很明智，也不适合。因此，如果您试图使用jQuery，请坚持使用它的规则和选择器
• 您正在定义一个名为

  send（）

  的函数，以在单击发送

  按钮后执行某些作业，但从未调用它。请记住，要调用函数，您总是需要在某个地方用括号调用它。在特定情况下，最好的方法是为按钮设置一个事件侦听器，以确保每次单击按钮时它都会调用您的函数。你只是想这么做，但在错误的地方

• 正如@full stack所指出的，您在javascript选择器中得到了错误的元素。因此，由于DOM中不存在id为txt的元素，您将面临一个引用错误

注意以下几点，您的最终代码应该是这样的：

$（document）.on（“click”，“.btn”，function（））{
var模态=$（“#myModal”）；
var content=$（'#addMemory'）.val（）；
if（content.length<1）{
控制台日志（“空”）；
}否则{
modal.hide（）；
console.clear（）；
$（“#demo p”）[0].innerHTML=“谢谢”；
}
})

记下一段记忆

邮寄

1）如注释中所示，

document.getElementById（'txt'）

不存在，您需要将其替换为

document.getElementById（'addMemory'）

2） 在您放置文本框的地方，文本框的值在加载时只保存一次，但您希望在用户单击“发送”按钮时检查它，因此您必须将其移动到发送功能中：

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

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; 
    }
}

3） 如果不在任何位置设置发送函数，则永远不会调用该函数，因此每次单击按钮时都需要调用该函数：

send

4） 当您在send函数中时，按钮已被单击，因此您不需要在文档上添加click侦听器，您已经在文档中，您需要关闭或不关闭弹出窗口

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

6） 由于当用户单击按钮时将调用send函数，因此您不再需要load事件监听器

---

这里就是：

文本区域的id是

addMemory

so

var content=document.getElementById（'txt'）.value不会正常工作的，更改它。但是现在模态不再出现了……好吧，它丢失了：modal.style.display=“block”；但是现在，如果我点击按钮，它什么也不做，不管它是否为空。上面也进行了编辑。我看不到任何地方有调用发送函数的代码