代码之家 › 专栏 › 技术社区 › KatherineMichelle

document.getElementByID.show()不是函数

if-statement function forms jquery javascript

KatherineMichelle · 技术社区 · 6 年前

我有一张表格。当用户单击一个列表项并选择一个“大小值”时,会给它一个已选择的类,然后用户可以提交表单。

我想弄清楚的是,当没有选择任何大小(因此没有列表项具有“已选择”类)时,表单将不会被提交,而是显示错误消息。我很难让这项工作和显示错误消息,因为表单仍在提交中。

现在我有个错误告诉我 document.getElementById("errormessage").show() 不是函数。

有人知道这是为什么吗?有人能帮我用我的代码让它按我想要的方式工作吗?

.on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  var x = document.getElementsByClassName("es-value");
  var i = x.length;
  var selected = false;
  while (i--) {
    if (x[i].hasAttribute("selected")) {
      selected = true;
    }
  }
  if (selected == false) {
    //Displays error
    document.getElementById("errormessage").show();
  } else {
    $(this).closest("#dialog-addToBag").find('form').submit();
  }
});

<form>
  <ul>
    <li>
      <ul>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
        <li class="size-value"></li>
      </ul>
    </li>
  </ul>
</form>
<div id="errormessage">Please select a size</div>
<div class="mt10">
  <input type="submit" class="modalAddToBagButton">
</div>

4 回复 | 直到 6 年前

Nikhil Aggarwal 6 年前

你搞混了 Javascript 和 Jquery 功能。

更新自

document.getElementById("errormessage").show();

到

$("#errormessage").show();

或

document.getElementById("errormessage").style.display = 'block';

brk 6 年前

似乎你想jquery显示方法。为此,您需要jquery对象。更换 document.getElementById("errormessage").show();

具有

$("#errormessage").show();

Liam Joshua 6 年前

show 是jquery函数。使用时 getElementById 您得到的是javascript元素,而不是jquery元素。使用 $('#errormessage') 相反。

Staxaaaa 6 年前

最好使用本地JS隐藏属性。在HTML中替换该行

<div id="errormessage">Please select a size</div>

带着那个

<div id="errormessage" hidden>Please select a size</div>

比在JS中

document.getElementById("errormessage").hidden = false;

供提交使用

form.addEventListener("submit", callback);

表单-表单元素, 同时使用

btn.addEventListener("click", callback);`

btn-你的按钮, .closest() 和“.find()”替换为 el.querySelectorAll() 把它按一定的顺序锁起来。总是用var中的任何或查询选择器缓存getelement并重用它。同样,在代码中,不需要检查 x[i].hasAttribute("selected") 如果至少有一个选中的项,则可以使用结束循环 break; .

推荐文章

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

Maddison · 如果用户选择18岁以下,则需要表单重定向用户

2 年前

Maddison · 拆分用户全名并将名字传递给下一个表单pae

2 年前

Santiago Cuartas Rmrz · 使用Javascript根据密码输入长度启用/禁用按钮

2 年前

BABO SAMMO NG · 如何延迟javascript警报直到操作完成

2 年前

Germán · 单击提交时,如果文本字段错误匹配,则显示错误提示

2 年前

Shikhor Khan · 如何从下面的代码中删除提交后的表单值?

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

inyourface3445 · 更改表单中的值会导致延迟

2 年前

Filippo · 无法输入:焦点覆盖默认设置

2 年前