在 JQuery 和 vanilla JS 之间设置函数时可能发生冲突？

Question

我正在尝试在 JS 和 PHP 中制作自己的盗版 bash 克隆，但我遇到了一个问题。尝试执行此脚本时，错误日志告诉我未定义 enteredCommand()，即使您可以在表单上方看到它。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        if($(".command") !== null){
            function enteredCommand(){
        }
        } else{
            // do nothing
        }
    });
</script>
<form id="commandField" onsubmit="return enteredCommand();">
    <p>bbash~ User:</p>
    <input class="command" type=text>
</form>

请帮忙！我是新的。这不是重复的，因为我不明白它是如何定义的。是的，控制台指定错误发生在“onsubmit”。

Answer 1

这是因为您定义的 enteredCommand() 函数超出了 onsubmit 调用的范围。

您需要反转逻辑，使 if 条件在 enteredCommand() 函数内。另请注意在 JS 代码中使用了一个不显眼的事件处理程序。将 onX 属性添加到 HTML 不再是好的做法，应该避免。

最后，要从 jQuery 对象中检索值，您需要调用 val()。将 jQuery 对象与 null 进行比较永远不会为真，因为 jQuery 对象永远不会为空。

let execCommand = c => {
  console.log(`User entered '${c}', handle it here...`);
} 

$(function() {
  let $command = $('.command');

  $('#commandForm').on('submit', e => {
    e.preventDefault(); // stop the form submission so you can handle it manually
    
    let command = $command.val().trim();
    if (command)
      execCommand(command);
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form id="commandForm">
  <p>bbash~ User:</p>
  <input class="command" type="text" />
</form>

在 JQuery 和 vanilla JS 之间设置函数时可能发生冲突？

Possible conflict while setting function between JQuery and vanilla JS?

javascript

jquery

function

undefined