个人中心
gpt4 book ai didi

JavaScript onclick 返回

转载 作者：行者123 更新时间：2023-12-02 17:51:18 25 4
gpt4 key购买 nike

我是 JavaScript 新手，我仍在弄清楚事情。

我已经在网上搜索过此内容，但我不太确定应该使用哪些关键字。我正在使用 html 和 JS 创建一些带有随机数的程序。

所以在我的 javascript 中(在标签内)我有类似的东西:

var x;
function initRandom() {  // I run this function at loading time (i.e: <body onload="initRandom();">)
  x = Math.random();
}

function checkGuessedNumber() {  // this just checks if the number guessed by the user is == to x and displays "correct" in a div if it is correct otherwise "incorrect"
}

所以我遇到的主要问题是

  • 提交后 html 元素会重置。例如，文本字段变为空白，我在 div 中显示的内容变为空白。它只显示一小段时间然后重置
  • 之后，生成的数字变成了不同的数字，我认为每次单击“提交”时，html 页面都会再次加载。我不喜欢这种情况发生。

我感到困惑的是 onClick() 属性上的 return 语句以及不带 return 时它有何不同。请参阅下面的示例:

代码1:

<form onsubmit="return checkGuessedNumber();">
 <input type="text">                // input for the number
 <input type="submit">              // click if already sure of input number above
</form>

代码2:

<form onsubmit="checkGuessedNumber();">  // notice no return here
 <input type="text">                
 <input type="submit">              
</form>

最后，如果我将 checkGuessedNumber上<input type="submit" onclick="checkGuessedNumber();">或者有 return在此之前。

最佳答案

这是一个 live demo (click) 这篇文章中的所有内容。

首先，不要使用内联js(html中的js函数，如onclick)。阅读其中一些结果: Why is inline js bad?

为了完整起见，我无论如何都会解释它是如何工作的:

这会禁用 submit按钮的性质。

<input type="submit" onclick="return false;">

现在，如果你想使用一个函数，你仍然需要产生上面的结果，所以:

<input type="submit" onclick="return foo()">

和foo必须返回 false，这样 return foo()与 return false 相同:

function foo() {
  //do what you need to do;
  return false;
}

我稍后会更新此内容，解释最佳实践，而不是使用内联 js。

“按钮”的最佳元素是 <button> ，所以我建议这样做。

<button id="my-btn">Click Me!</button>

我给了它一个 id，以便我们可以在 JavaScript 中轻松识别它。还有很多其他方法来获取元素引用，但这是另一个主题。现在，在 JavaScript 中:

//get the element reference
var myBtn = document.getElementById('my-btn');

//this will make the button call function "foo" when it is clicked.
myBtn.addEventListener('click', foo);

function foo(event) {
  //do whatever you want
}

如果将事件监听器分配给具有默认行为的元素，则可以阻止默认行为，如下所示:

//the "event" object is automatically passed to the event handler
function foo(event) {
  event.preventDefault();
  //do what you want here
}

关于JavaScript onclick 返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21346340/

25 4 0
文章推荐： javascript - 匹配括号内的内容
文章推荐： javascript - jQuery 循环遍历表格来显示值
文章推荐： c# - return false 必须停止 JavaScript 中的执行
文章推荐： laravel - Docker:错误无法启动服务 nginx:OCI 运行时创建失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com