HTML 按钮 onclick 属性 不调用该函数,更改时表现异常
HTML button onclick property does not call the function, behaving strangely when changed
我正在制作一个应用程序,它可以从 MySQLi 数据库结果中按程序生成 HTML 代码。它使用一个调用 JavaScript 函数的按钮,该函数将 XMLHttpRequest 发送到删除行的服务器,以便在处理完项目后将其从列表中删除。
这是相关的 PHP 代码:
<?php
require_once("lib/dbclass.php");
$conn = new Conn();
$result = $conn->query("SELECT * FROM orders");
?>
<?php foreach($result as $item) {?>
<div class="row" id="item<?php echo $item['oid']; ?>">
<p>Type</p>
<span class="item"><?php echo htmlspecialchars($item['a']); ?></span>
<p>Size</p>
<span class="item"><?php echo htmlspecialchars($item['b']); ?></span><br>
<button type="button" onclick="close('<?php echo $item['c']; ?>')">Item processed</button>
</div>
<?php }?>
<script src="js/dashboard.js"></script>
这里是 dashboard.js:
function close(order_id) {
console.log("Closing order number " + order_id);
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
console.log("Readystate changed! New: " + this.readyState);
if (this.readyState == 4 && this.status == 200) {
console.log("Operation completed.");
document.getElementById("order" + order_id).remove();
}
}
http.open("GET", "order_complete.php?oid=" + order_id, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send();
}
但是问题是onclick没有调用close函数。在检查元素面板中,它正确显示为 <button type="button" onclick="close(2)")>Item processed</button>
。但是,当我单击按钮时,什么也没有发生。我试过:
- 使用
type="button"
将按钮明确声明为按钮。没有区别。
- 正在从
onclick
标签中删除参数,使其看起来像 onclick="close(1)"
。没有区别。
- 正在删除按钮的所有样式。没有区别。
- 正在从控制台调用函数。它在那里工作,并从页面中删除了该项目。所以看来按钮是问题所在。
- 正在将检查面板中按钮的
onclick
更改为 alert("Hi")
。按下按钮时调用的函数。当我将其改回 close(2)
时,它又调用了 alert("Hi")
。
已解决:Aparrantly close()
是一个保留函数。
将其更改为 closeOrder()
解决了问题。
我正在制作一个应用程序,它可以从 MySQLi 数据库结果中按程序生成 HTML 代码。它使用一个调用 JavaScript 函数的按钮,该函数将 XMLHttpRequest 发送到删除行的服务器,以便在处理完项目后将其从列表中删除。 这是相关的 PHP 代码:
<?php
require_once("lib/dbclass.php");
$conn = new Conn();
$result = $conn->query("SELECT * FROM orders");
?>
<?php foreach($result as $item) {?>
<div class="row" id="item<?php echo $item['oid']; ?>">
<p>Type</p>
<span class="item"><?php echo htmlspecialchars($item['a']); ?></span>
<p>Size</p>
<span class="item"><?php echo htmlspecialchars($item['b']); ?></span><br>
<button type="button" onclick="close('<?php echo $item['c']; ?>')">Item processed</button>
</div>
<?php }?>
<script src="js/dashboard.js"></script>
这里是 dashboard.js:
function close(order_id) {
console.log("Closing order number " + order_id);
var http = new XMLHttpRequest();
http.onreadystatechange = function() {
console.log("Readystate changed! New: " + this.readyState);
if (this.readyState == 4 && this.status == 200) {
console.log("Operation completed.");
document.getElementById("order" + order_id).remove();
}
}
http.open("GET", "order_complete.php?oid=" + order_id, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send();
}
但是问题是onclick没有调用close函数。在检查元素面板中,它正确显示为 <button type="button" onclick="close(2)")>Item processed</button>
。但是,当我单击按钮时,什么也没有发生。我试过:
- 使用
type="button"
将按钮明确声明为按钮。没有区别。 - 正在从
onclick
标签中删除参数,使其看起来像onclick="close(1)"
。没有区别。 - 正在删除按钮的所有样式。没有区别。
- 正在从控制台调用函数。它在那里工作,并从页面中删除了该项目。所以看来按钮是问题所在。
- 正在将检查面板中按钮的
onclick
更改为alert("Hi")
。按下按钮时调用的函数。当我将其改回close(2)
时,它又调用了alert("Hi")
。
已解决:Aparrantly close()
是一个保留函数。
将其更改为 closeOrder()
解决了问题。