Javascript 如何在iPhone上使用onclick_Javascript_Html_Ios_Iphone_Onclick

Javascript 如何在iPhone上使用onclick

javascript html ios iphone

Javascript 如何在iPhone上使用onclick,javascript,html,ios,iphone,onclick,Javascript,Html,Ios,Iphone,Onclick,我正在做一个项目，基本上要求用户输入三个数字，然后根据他们点击提交按钮后输入的内容生成指令。我能够让它完美地满足我在台式电脑上的需求，但当我在iPhone7上试用它时，它就不起作用了。不过，它在我使用Chrome的android手机上也能正常工作，所以Safari/iOS显然存在问题。基本上，在我的iPhone上，它允许我输入三个输入字段，但是当我点击submit按钮时，什么都没有发生。从我在网上看到的情况来看，我正在使用的onclick功能似乎有问题，但是我尝试了使用cursor:pointe

我正在做一个项目，基本上要求用户输入三个数字，然后根据他们点击提交按钮后输入的内容生成指令。我能够让它完美地满足我在台式电脑上的需求，但当我在iPhone7上试用它时，它就不起作用了。不过，它在我使用Chrome的android手机上也能正常工作，所以Safari/iOS显然存在问题。基本上，在我的iPhone上，它允许我输入三个输入字段，但是当我点击submit按钮时，什么都没有发生。从我在网上看到的情况来看，我正在使用的onclick功能似乎有问题，但是我尝试了使用cursor:pointer的推荐修复方法，但没有效果。我也是这方面的新手（已经有20年没有使用java/html了，并且基本上在使用教程和示例的过程中遇到了困难），所以我没有尝试过一些没有很好的说明如何实现它们的解决方案。我的完整代码如下，以帮助任何愿意帮助我的人。我只是希望它在iOS上的工作方式与在其他平台上的工作方式相同

<!DOCTYPE html>
<html>
<head>
<style>

.button {
  background-color: #4CAF50;
  border: none;
  color: black;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

div {
  cursor: pointer;
  position: relative;
  width: 50%;
  margin:auto;
  left: 0;
  right: 0;
  text-align: left;
}

div.a {
  word-wrap: normal;
}

</style>
</head>
<body>

<div class="a">
<h2>Ficus Hedge Treatment</h2>
</div>

<div class="a">
<p>This will tell you how much water and product is needed for treatment:</p>
</div>

<div class="a">
<b>Hedge Length in feet:</b>
<br><input id = "length" type = number></input><br><br>
<b>Hedge Height in feet:</b>
<br><input id = "height" type = number></input><br><br>
<b>Space Between in feet:</b>
<br><input id = "space" type = number></input>
<button type = "button"
onclick="myFunction2()" class="button">
Submit
</button>
</div>

<br>
<br>
<br>
<div class="a">
<b><p id="demo"></p></b>
</div>

<script>

function myFunction2() {
var input1 = document.getElementById("length").value;
var input2 = document.getElementById("height").value;
var input3 = document.getElementById("space").value;
var plants = input1 / input3;
var gals = plants + 1;
var totDominion = input2 * plants * 0.1;
var totFert = input1 * 6 * .0067
totFert = totFert.toFixed(2);
var mixrate = totDominion / gals;
mixrate = mixrate.toFixed(2);
document.getElementById("demo").innerHTML = "You will need to mix " + mixrate + " oz of Dominion per gallon, and use " + gals + " gallons of water. You will also use " + totFert + " pounds of 15-0-15."
}

function myFunction(a, b, c) {
  return a * b * c;
}

</script>
</body>
</html>


.按钮{
背景色：#4CAF50；
边界：无；
颜色：黑色；
填充：6px 10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
div{
光标：指针；
位置：相对位置；
宽度：50%；
保证金：自动；
左：0；
右：0；
文本对齐：左对齐；
}
a组{
换字：正常；
}
榕树篱笆处理
这将告诉您处理需要多少水和产品：
以英尺为单位的树篱长度：




树篱高度（英尺）：




英尺间距：


提交







函数myFunction2（）{
var input1=document.getElementById（“长度”）.value；
var input2=document.getElementById（“高度”）.value；
var input3=document.getElementById（“空格”）.value；
var设备=输入1/输入3；
var gals=植物+1；
var totDominion=input2*工厂*0.1；
var totFert=input1*6*.0067
totFert=totFert.toFixed（2）；
var mixrate=totDominion/gals；
混合率=混合率。toFixed（2）；
document.getElementById（“demo”）.innerHTML=“您需要混合“+mixrate+”盎司每加仑的自治领，并使用“+gals+”加仑水。您还将使用“+totFert+”磅15-0-15。”
}
函数myFunction（a、b、c）{
返回a*b*c；
}

根据@lzbernardo的参考，以下是您需要添加到脚本中的更改，并从按钮中删除

onclick=MyFunction2（）

，然后添加id=“MyFunction2”。检查窗口是否支持触摸事件，并相应地添加事件侦听器

参考以下代码

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    .button {
      background-color: #4CAF50;
      border: none;
      color: black;
      padding: 6px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    div {
      cursor: pointer;
      position: relative;
      width: 50%;
      margin:auto;
      left: 0;
      right: 0;
      text-align: left;
    }

    div.a {
      word-wrap: normal;
    }

    </style>
    </head>
    <body>

    <div class="a">
    <h2>Ficus Hedge Treatment</h2>
    </div>

    <div class="a">
    <p>This will tell you how much water and product is needed for treatment:</p>
    </div>

    <div class="a">
    <b>Hedge Length in feet:</b>
    <br><input id = "length" type = number></input><br><br>
    <b>Hedge Height in feet:</b>
    <br><input id = "height" type = number></input><br><br>
    <b>Space Between in feet:</b>
    <br><input id = "space" type = number></input>
    <button type = "button" id="myFunctionBtn2" class="button">
    Submit
    </button>
    </div>

    <br>
    <br>
    <br>
    <div class="a">
    <b><p id="demo"></p></b>
    </div>

    <script>
    //check if touchevent is available
    let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
    //bind touch event to the button with id = myFunction2 and call myFunction2 function
document.getElementById('myFunctionBtn2').addEventListener(touchEvent, myFunction2);    

    function myFunction2() {
    var input1 = document.getElementById("length").value;
    var input2 = document.getElementById("height").value;
    var input3 = document.getElementById("space").value;
    var plants = input1 / input3;
    var gals = plants + 1;
    var totDominion = input2 * plants * 0.1;
    var totFert = input1 * 6 * .0067
    totFert = totFert.toFixed(2);
    var mixrate = totDominion / gals;
    mixrate = mixrate.toFixed(2);
    document.getElementById("demo").innerHTML = "You will need to mix " + mixrate + " oz of Dominion per gallon, and use " + gals + " gallons of water. You will also use " + totFert + " pounds of 15-0-15."
    }

    function myFunction(a, b, c) {
      return a * b * c;
    }

    </script>
    </body>
    </html>


.按钮{
背景色：#4CAF50；
边界：无；
颜色：黑色；
填充：6px 10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
}
div{
光标：指针；
位置：相对位置；
宽度：50%；
保证金：自动；
左：0；
右：0；
文本对齐：左对齐；
}
a组{
换字：正常；
}
榕树篱笆处理
这将告诉您处理需要多少水和产品：
以英尺为单位的树篱长度：




树篱高度（英尺）：




英尺间距：


提交







//检查touchevent是否可用
是否让touchEvent='ontouchstart'在窗口中touchstart'：“单击”；
//将触摸事件绑定到id=myFunction2的按钮并调用myFunction2函数
document.getElementById（'myFunctionBtn2'）。addEventListener（touchEvent，myFunction2）；
函数myFunction2（）{
var input1=document.getElementById（“长度”）.value；
var input2=document.getElementById（“高度”）.value；
var input3=document.getElementById（“空格”）.value；
var设备=输入1/输入3；
var gals=植物+1；
var totDominion=input2*工厂*0.1；
var totFert=input1*6*.0067
totFert=totFert.toFixed（2）；
var mixrate=totDominion/gals；
混合率=混合率。toFixed（2）；
document.getElementById（“demo”）.innerHTML=“您需要混合“+mixrate+”盎司每加仑的自治领，并使用“+gals+”加仑水。您还将使用“+totFert+”磅15-0-15。”
}
函数myFunction（a、b、c）{
返回a*b*c；
}

光标：指针

css仅设置用于显示鼠标指针的图像/图标；它与处理事件无关。iOS支持名为“触摸”的事件，而不是传统的“点击”。你可以在这里查看完整答案，谢谢，我看到了那篇文章，但我对如何在代码中实现它感到非常困惑。看起来我不得不放弃很多我目前正在使用的东西来实现它。我的假设正确吗？