javascript - IF 条件不适用于表单内的按钮

Question

我希望使我正在开发的网站具有响应能力。我有一个包含 Logo 、搜索栏和其他一些按钮的栏。我想做的是使用媒体查询来隐藏搜索栏移动并用按钮激活它，但我无法让它工作。这是我的表单代码:

function resize() {
  if ($(window).width() < 1105) {
    alert("Hello World!");
  } else {
    document.getElementById("formular").submit();
  }
}

<form action="cautare-test.php" method="post" id="formular">
  <input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
  <button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>

我的问题是，在宽度大于1105时，表单被提交，但在分辨率低于1105时，按下按钮时没有警告框。提前感谢您的帮助，我真的希望听到其他响应式设计解决方案。

Answer 1

如果添加 jquery，您的代码可以正常工作。也许您忘记添加它或不想使用它。然后，您需要添加 jquery 或将 jquery 方法更改为 vanillaJs window.innerWidth

function resize() {
  if (window.innerWidth  < 1105) {
    alert("Hello World!");
  } else {
    document.getElementById("formular").submit();
  }
}

<form action="cautare-test.php" method="post" id="formular">
  <input type="text" name="search" id="bara-cautare" placeholder="Press Enter to search!">
  <button id="test" type="button" onclick="resize()"><img src="pictures\buton_cautare.png"></button>
</form>