【问题标题】:HTML button onclick property does not call the function, behaving strangely when changed [duplicate]HTML按钮onclick属性不调用该函数,更改时行为奇怪[重复]
【发布时间】:2020-11-21 17:44:40
【问题描述】:

我正在制作一个从 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 函数。在检查元素面板中,它正确显示为&lt;button type="button" onclick="close(2)")&gt;Item processed&lt;/button&gt;。但是,当我单击按钮时,什么也没有发生。我试过了:

  • 使用type="button" 将按钮显式声明为按钮。没有区别。
  • onclick 标记中删除参数,使其看起来像onclick="close(1)"。没有区别。
  • 从按钮中删除所有样式。没有区别。
  • 从控制台调用函数。它在那里工作,并从页面中删除了该项目。所以看来按钮是问题所在。
  • 将检查面板中按钮的onclick 更改为alert("Hi")。按下按钮时调用的函数。当我将其改回close(2) 时,它再次调用alert("Hi")

【问题讨论】:

  • 把你的函数名改成别的。又名function closeOrder (order_id)
  • @epascarello 成功了,是保留关键字还是什么?

标签: javascript php html htmlbutton


【解决方案1】:

已解决:显然close() 是一个保留函数。 将其更改为 closeOrder() 解决了这个问题。

【讨论】:

    猜你喜欢
    • 2013-12-12
    • 1970-01-01
    • 1970-01-01
    • 2014-12-22
    • 2016-06-26
    • 1970-01-01
    • 2020-11-12
    • 2018-12-02
    • 2010-10-19
    相关资源
    最近更新 更多