How to use onclick on iPhone

Question

I am working on a project that basically asks the user for three numerical inputs, and then generates instructions based on what they entered once they click on the submit button. I was able to get it to work perfectly for what I needed on my desktop PC, but when I tried it on my iPhone 7 it does not work. It does, however work on my android phone using Chrome, so it is clearly an issue with Safari/iOS. Basically on my iPhone it allows me to type in the three input fields, however when I click on the submit button nothing happens. From what I've been seeing online it seems to be an issue with the onclick function that I am using, however I have tried the recommended fix of using cursor: pointer to no avail. I am also extremely novice at this (haven't used java/html in almost 20 years, and basically stumbled through what I have using tutorials and examples), so I haven't tried some of the solutions that didn't have great instructions on how to implement them. My full code is below to help anyone who is willing to assist me. I just want it to work on iOS the same way it works on other platforms.

<!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>

`cursor:pointer` css only sets the image/icon used to display the mouse pointer; it has nothing to do with handling events. — Mark Stewart, Dec 30 '19 at 21:22
iOS supports an event called "touch", instead of the traditional "click". You can check a full answer here https://stackoverflow.com/questions/18914568/make-onclick-work-on-iphone/18914640#18914640 — lzbernardo, Dec 30 '19 at 21:28
Thanks, i saw that post, but i was very confused on how to implement it into my code. It looks like i would have to scrap a lot of what i am currently using to implement that instead. Am i correct in that assumption? — Jason Miller, Dec 31 '19 at 04:22

score 0 · Answer 1 · answered Jan 01 '20 at 12:47

as per the reference from @lzbernardo, below are the changes you need to add in your script and remove onclick=MyFunction2() from the button and add id="myFunction2". Check if window supports touch event and accordingly add event listener

See below code for reference

    <!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>

How to use onclick on iPhone

1 Answers1