Question

使用Express（Node.js）和香草javascript（1个html文件和1个script.js文件）在Heroku上部署了一个简单的应用程序。一切正常，直到我最近将域名更改为我的heroku应用。我的代码在Android和台式机上均可正常运行。更具体地说，我添加到输入标记中的事件侦听器可以毫无问题地执行代码。它在iPhone上的运行时间不长，但是突然间，它停止在Safari（台式机）和iPhone（所有浏览器）上运行。

我尝试通过测试导致特定代码段的每一步来跟踪问题，在这种情况下，它正在更改textContent元素。我已将事件监听器从“输入”切换为“按键”，并添加了一个警报，可在按下预期的按键时在移动设备上触发（例如：keyCode === 13）。我收到了要触发的警报，但此后的所有内容仅在Safari和iPhone上无法执行（在Android和桌面上正常运行）。我还尝试过从给定的元素中删除动画以及在输入标签本身周围播放，但这似乎不是问题。

adding the event listener to the input tag

input.addEventListener('input', (e) => {
    switch (filterStr('How much would you like to ', howMuch.innerText)) {
      case 'borrow?':
        if (e.value !== '') {
          pay.textContent = 'Repayment timeframe options + interest:';
          console.log(pay);
          pay.style.paddingLeft = '3vw';
          weekOne.textContent = `1 Week = ${filterNum(input.value * 1.01)}`;
          weekOne.style.paddingLeft = '5vw';
          console.log(weekOne);
          weekTwo.textContent = `2 Weeks = ${filterNum(input.value * 1.025)}`;
          weekTwo.style.paddingLeft = '5vw';
          console.log(weekTwo);
          month.textContent = `1 Month = ${filterNum(input.value * 1.06)}`;
          month.style.paddingLeft = '5vw';
          console.log(month);
        //   pay.classList.add('animated', 'fadeInLeft', 'slower');
        //   weekOne.classList.add('animated', 'fadeInLeft', 'slower', 'delay-1s');
        //   weekTwo.classList.add('animated', 'fadeInLeft', 'slower', 'delay-2s');
        //   month.classList.add('animated', 'fadeInLeft', 'slower', 'delay-3s');
        }
        break;

您可以访问此站点以查看预期的输出（在Android和台式机上均可正常运行）：

https://spot-me-123.herokuapp.com/calculator/ （使用“ keypress”（输入）事件监听器）

事件触发后，为什么我的代码块无法在iPhone上执行，但在台式机和Android上运行正常？

0 个答案: