iPhone端按钮元素点击无响应问题求助

我为数学课做了一个互动页面，但在iPhone上按钮完全没反应，点击后根本不执行对应的脚本函数。我试过用事件监听器绑定点击事件，也试过直接在按钮标签里加onclick属性，甚至还同时绑定了touchstart和click事件，可都没用。有没有大佬知道这是咋回事呀？

我已经尝试过的解决方法： #

• 方法一：使用addEventListener绑定点击事件

document.querySelector('#aufloesen').addEventListener("click", function(event) {
  event.preventDefault();
  rechnung();
});

document.querySelector('#aufloesen1').addEventListener("click", function(event) {
  event.preventDefault();
  rechnung1();
});

• 方法二：直接在按钮标签内添加onclick属性（也试过非驼峰的onclick写法）

<button onClick="rechnung1()">buttontext</button>

• 方法三：同时绑定触摸和点击事件

document.querySelector('#aufloesen').addEventListener("touchstart", rechnung);
document.querySelector('#aufloesen1').addEventListener("touchstart", rechnung1);
document.querySelector('#aufloesen').addEventListener("click", rechnung);
document.querySelector('#aufloesen1').addEventListener("click", rechnung1);
//Aufgabe 1
function rechnung() {
  const result1 = document.querySelector('#calc1Input').value;
  if (result1 === "2404,19") {
    document.querySelector('#calc1Input').setAttribute('disabled', 'disabled')
    document.querySelector('#wrong').innerHTML = "";
    document.querySelector('#window').innerHTML = "<div class='richtig'>" + "Korrekte Antwort!" + "</div>";
    document.querySelector('#window').style.background = 'green';
    document.querySelector('#window').style.borderColor = 'green';
    document.querySelector('#aufloesen').setAttribute('disabled', 'disabled');
  } else {
    document.querySelector('#wrong').innerHTML = "Falsche Antwort!";
    document.querySelector('#window').style.borderColor = 'red';
  }
}
//Aufgabe 2
function rechnung1() {
  const result11 = document.querySelector('#calc1Input1').value;
  if (result11 === "421,90") {
    document.querySelector('#calc1Input1').setAttribute('disabled', 'disabled')
    document.querySelector('#wrong1').innerHTML = "";
    document.querySelector('#window1').innerHTML = "<div class='richtig'>" + "Korrekte Antwort!" + "</div>";
    document.querySelector('#window1').style.background = 'green';
    document.querySelector('#window1').style.borderColor = 'green';
    document.querySelector('#aufloesen1').setAttribute('disabled', 'disabled');
  } else {
    document.querySelector('#wrong1').innerHTML = "Falsche Antwort!";
    document.querySelector('#window1').style.borderColor = 'red';
  }
}

页面完整代码参考： #

CSS样式

body {
  background: dimgray;
  color: white;
  font-family: none;
}

.header {
  text-align: center;
  font-weight: bold;
}

.header2,
.header3 {
  text-align: center;
}

.rechnung {
  font-weight: bold;
  text-align: center;
}

#calc1Input {
  width: 50px;
  border-radius: 2px;
  border: solid lightgray 1px;
  background: gray;
  color: white;
}

#calc1Input:focus {
  width: 50px;
  border-radius: 2px;
  border: solid lightgray 1px;
  background: gray;
  color: white;
  outline: none;
}

#correct {
  font-weight: bold;
  color: green;
}

#wrong {
  font-weight: bold;
  color: red;
}

#window {
  width: 200px;
  height: 120px;
  border: solid gray 1px;
  border-radius: 10px;
  font-family: none;
}

#window {
  margin-left: 45px;
  text-align: center;
  background: dimgray;
}

#calc1Input {
  font-family: none;
  text-align: center;
}

#aufloesen {
  margin-top: 10px;
  border: solid gray 1px;
  border-radius: 8px;
  height: 30px;
  width: 80px;
  font-weight: bold;
  color: black;
  background: white;
  margin-left: 105px;
  cursor: pointer;
  font-family: none;
}

.berechnung {
  margin-top: 20px;
}

.richtig {
  margin-top: 25px;
  font-size: 30px;
  font-weight: bold;
}

#wrong {
  margin-top: 40px;
}

#calc1Input1 {
  width: 50px;
  border-radius: 2px;
  border: solid lightgray 1px;
  background: gray;
  color: white;
}

#calc1Input1:focus {
  width: 50px;
  border-radius: 2px;
  border: solid lightgray 1px;
  background: gray;
  color: white;
  outline: none;
}

#correct1 {
  font-weight: bold;
  color: green;
}

#wrong1 {
  font-weight: bold;
  color: red;
}

#window1 {
  width: 200px;
  height: 120px;
  border: solid gray 1px;
  border-radius: 10px;
  font-family: none;
}

#window1 {
  margin-left: 45px;
  text-align: center;
  background: dimgray;
}

#calc1Input1 {
  font-family: none;
  text-align: center;
}

#aufloesen1 {
  margin-top: 10px;
  border: solid gray 1px;
  border-radius: 8px;
  height: 30px;
  width: 80px;
  font-weight: bold;
  color: black;
  background: white;
  margin-left: 105px;
  cursor: pointer;
  font-family: none;
}

.berechnung {
  margin-top: 20px;
}

.richtig {
  margin-top: 25px;
  font-size: 30px;
  font-weight: bold;
}

#wrong1 {
  margin-top: 40px;
}

.aufgabenstellung {
  font-weight: bold;
}

div.body {
  background-color: gray;
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 9px;
}

.coordinate-system {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.axis {
  stroke: black;
  stroke-width: 1;
}

.label {
  font-size: 12px;
}

.line {
  stroke: red;
  stroke-width: 2;
  fill: none;
}

svg {
  background: white;
  border: solid black 1px;
  margin-left: -4px;
}

HTML结构

<link rel="stylesheet" href="https://fontlibrary.org//face/cmu-serif">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<h1 class="header">Portfolio Mathematik</h1>
<h3 class="header3" style="color:#f8baba;">Sofian Sekakri</h3>
<div class="body">
  <h2 class="header2" style="color:orange;font-weight:bold;">1. Zinseszins</h2>
  <h3 class="header3">Erklärung der Formel</h3>
  <div class="section">
    <div class="header">1. K (Endkapital)</div>
    <div class="content">
      Das Endkapital ist der Betrag nach der Berechnung. Es ergibt sich aus dem Anfangskapital und dem Wachstumsfaktor. Es zeigt den Endwert nach der Zeit.
    </div>
  </div>
  <br>
  <div class="section">
    <div class="header">2. K<sub>0</sub> (Anfangskapital)</div>
    <div class="content">
      Das Anfangskapital ist der Betrag zu Beginn. Es ist der Ausgangspunkt der Berechnung.<br>
      <b>Beispiel: K<sub>0</sub> = 2300.</b>
    </div>
  </div>
  <br>
  <div class="section">
    <div class="header">3. q (Wachstumsfaktor)</div>
    <div class="content">
      Der Wachstumsfaktor zeigt, wie sich das Kapital verändert.Er wird durch den Zinssatz berechnet.<br>
      <b>Zum Beispiel: q = 1.03 bei 3% Zinsen.</b>
    </div>
  </div>
  <br>
  <div class="section">
    <div class="header">4. n (Anzahl der Jahre/Perioden)</div>
    <div class="content">
      n ist die Anzahl der Jahre.
      Je höher n, desto länger läuft die Verzinsung. <b>Für 5 Jahre ist n = 5.</b>
    </div>
  </div>
  <br>
  <div class="section">
    <div class="header">5. q<sup>n</sup> (Wachstumsfaktor hoch n)</div>
    <div class="content">
      Der Wachstumsfaktor wird über n Jahre angewendet. Es multipliziert das Kapital mehrfach.<br>
      <b>Beispiel: (1.03)<sup>3</sup> für 3 Jahre.</b>
    </div>
  </div>
  <br>
  <h3 class="header3">Beispiel für Zinseszins</h3>
  <svg width="300" height="300" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Achsen -->
  <line x1="50" y1="350" x2="350" y2="350" stroke="black" stroke-width="2" />
  <line x1="50" y1="350" x2="50" y2="50" stroke="black" stroke-width="2" />
  
  <!-- Achsenbeschriftungen -->
  <text x="50" y="370" font-size="12" text-anchor="middle">0</text>
  <text x="100" y="370" font-size="12" text-anchor="middle">2</text>
  <text x="150" y="370" font-size="12" text-anchor="middle">4</text>
  <text x="200" y="370" font-size="12" text-anchor="middle">6</text>
  <text x="250" y="370" font-size="12" text-anchor="middle">8</text>
  <text x="300" y="370" font-size="12" text-anchor="middle">10</text>
  <text x="40" y="350" font-size="12" text-anchor="middle">9.700</text>
  <text x="40" y="300" font-size="12" text-anchor="middle">10.000</text>
  <text x="40" y="250" font-size="12" text-anchor="middle">10.400</text>
  <text x="40" y="200" font-size="12" text-anchor="middle">10.800</text>
  <text x="40" y="150" font-size="12" text-anchor="middle">11.200</text>
  <text x="40" y="100" font-size="12" text-anchor="middle">11.600</text>
  <text x="40" y="50" font-size="12" text-anchor="middle">12.000</text>
  <!-- Exponentielle Kurve (Wachstum über 10 Jahre) -->
  <path d="M50,350 C100,330, 150,280, 200,230 C250,170, 300,100, 350,50" stroke="blue" stroke-width="2" fill="transparent" />
</svg>
  <h2 class="header2">Aufgabe 1</h2>
  <div style="text-align:center;">
    Carlos legt an sein Sparkonto 2.300 Euro über 5 Jahre an. Der Zinssatz pro Jahr beträgt 0,89 Prozent. <b>Runde das Ergebnis auf 2 Kommastellen</b>.
  </div>
  <ul>
    <div style="font-weight:bold;">

我原本期望点击按钮后能正常执行对应的校验函数，显示正确或错误的提示，但因为只能在苹果移动设备上测试，没法进行有效的调试，实在摸不着头绪了。

备注：内容来源于stack exchange，提问作者Crazylosthismind