Question

我已经在HTML中创建了多个按钮，并指定了onclick函数。当我单击一个按钮时，会发生正确的操作（值会更改，等等）。但是，当我单击另一个按钮时，以前单击的按钮的值将设置为空。

HTML按钮创建：（我使用的是Flask，因此{{}}中的内容被替换了）

<button type="button" id="{{ button.name }}" onclick="buttonClicked(this.id)">{{ button.name }}</button>

JavaScript buttonClicked函数：

function buttonClicked(buttonID){
     console.log("button clicked (running from render.js)")
     Http.open("GET", "http://localhost:5000/buttonClicked/buttonClicked");
     Http.send();
     Http.onreadystatechange=(e)=>{
          console.log(Http.responseText)
          //buttonID.innerHTML = Http.responseText;
          el = document.getElementById(buttonID);
          el.innerHTML = String(Http.responseText);
     }
};

我还尝试过像这样使用<input>：

<input id="{{ button.name }}" type="button" onclick="buttonClicked(this.id)" value="RegA" />

编辑：单击按钮时发生的情况的示例单击第一个按钮：

<button type="button" id="button1" onclick="buttonClicked(this.id)"></button>

点击了第二个按钮：

<button type="button" id="button2" onclick="buttonClicked(this.id)">buttonClicked returned from python</button>

Answer 1

您应该为buttonClicked函数中的每个click事件创建一个单独的XMLHttpRequest对象。

function buttonClicked(buttonID) {
    let Http = new XMLHttpRequest();
    console.log("button clicked (running from render.js)")
    Http.open("GET", "http://localhost:5000/buttonClicked/buttonClicked");
    Http.send();
    // ....
}

https://jsfiddle.net/gh68qrtx/

在按钮上单击之前按下的按钮的值设置为空白

1 个答案: