点击计算按钮才会出现提示信息
时间: 2023-09-09 09:14:40 浏览: 37
好的,如果你想要在点击计算按钮后才出现提示信息,可以使用以下代码:
首先,在 HTML 中,你需要在计算按钮所在的 form 元素中添加一个 submit 事件监听器,代码如下:
```html
<form onsubmit="return calculate();">
<!-- 其他表单元素 -->
<button type="submit">计算</button>
</form>
```
这里在 form 元素中添加了一个 `onsubmit` 属性,并且调用了一个名为 `calculate` 的函数。在这个函数中,你可以编写计算逻辑和显示提示信息的代码。
然后,在 JavaScript 中,你需要定义 `calculate` 函数,代码如下:
```javascript
function calculate() {
// 这里编写计算逻辑的代码
// 显示提示信息的代码
var successDiv = document.getElementById("success");
var failDiv = document.getElementById("fail");
if (/* 操作成功 */) {
successDiv.style.display = "block";
failDiv.style.display = "none";
} else {
successDiv.style.display = "none";
failDiv.style.display = "block";
}
// 阻止表单提交
return false;
}
```
在这个函数中,你可以编写计算逻辑的代码。然后,根据计算结果来显示相应的提示信息。这里使用了 `getElementById` 方法来获取两个 div 元素,并且使用 `style.display` 属性来控制它们的显示和隐藏。
最后,需要使用 `return false` 语句来阻止表单的默认提交行为,这样才能保证在点击计算按钮后出现提示信息。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)