更改按钮文本和功能onClick在iPad / iPhone上不起作用

我有一个按钮。

当您打开页面时，它会显示“ 比较”，并在单击时会并排比较两个产品。 单击比较后，该按钮将更改为“上一步”，然后单击该按钮刷新页面。 问题在于这仅适用于台式机。当我通过chrome devtools将其更改为iPhone或iPad时，即使单击它，它也保持比较，并且没有变化。

  <button type="button" class='btn goCompare' id="goCompare" data-show="compareBack" style="width: 100%;">Compare</button>
</div> 

可能的解决方案：

  <div>
      <button id="compare">Compare</button>
      <button id="back" style="display: none;">Back</button>
  </div>
  <script type="text/javascript">
    document.getElementById('compare').onclick=function(){
      document.getElementById('compare').style.display = "none";
      document.getElementById('back').style.display = "block";
    }
    document.getElementById('back').onclick=function(){
      document.getElementById('compare').style.display = "none";
      refreshPage();
    }
    function refreshPage() {
      window.location.reload(true);
    }
  </script>
</body>