Need help using document.getElementById with
tag

Question

I'm trying to use a form tag with document.getElementById, but I am having issues with having the Javascript retrieve the values from my inputs. Or maybe something else is completely wrong and I'm just stupid.

HTML:

<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>

<label for="age">Age:</label>
<input type="text" id="age" name="age">

<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">

<input type="submit" name="submit">
</form>

JS:

function testMonth() {
var month = document.getElememtById('month').value;
if(month == July || month == August) {
document.getElementById('price').innerHTML = "$150";
}
else {
if(month == null) {
alert('Please fill out the month field');
}
else {
testAge();
}
}
}

function testAge() {
var age = document.getElementById('age').value;
if(age == null) {
alert('Please fill out the age field');
}
else {
if(age < 5 || age > 90) {
alert('Visiters must be between the ages of 5 and 90');
}
else {
if (age == 10 || age == 90) {
testCoupon();
}
else {
if (age < 18 || age == 18) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
}
}

function testCoupon() {
var coupon = document.getElementById('coupon').value;
if (coupon == "YEET") {
document.getElementById('price').innerHTML = "$0";
}
else {
if (document.getElementById('age').value == 10) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}

When I fill out the fields on the website and hit sumbit, the site just refreshes, which makes me think that the submit button/form syntax is wrong. However, the issue could also be that I have written the JS wrong, and it's not retrieving the value of the form inputs.

You'll want to call `event.preventDefault()` so that the form doesn't submit (and load the target page) — Bergi, May 10 '22 at 22:38
You also might consider using indentation when writing code - it makes things a lot easier when you can see all the blocks and their nesting levels at a glance — CertainPerformance, May 10 '22 at 22:38

score 0 · Answer 1 · answered May 10 '22 at 22:52

I found 3 bugs in your code. First you should use

event.preventDefault()

as second in your first if statement inside testMonth function you are checking July and August but you do not have that variables. You should check as string or create variable for them and last one you have typo in getElementById again in first part of testMonth function

function testMonth() {
  event.preventDefault() 
  var month = document.getElementById('month').value;
  if(month == 'July' || month == 'August') {
    document.getElementById('price').innerHTML = "$150";
  }
  else {
    if(month == null) {
     alert('Please fill out the month field');
    }
    else {
      testAge();
    }
  }
}

function testAge() {
  var age = document.getElementById('age').value;
  if(age == null) {
  alert('Please fill out the age field');
  } 
  else {
      if(age < 5 || age > 90) {
      alert('Visiters must be between the ages of 5 and 90');
      }
      else {
        if (age == 10 || age == 90) {
        testCoupon();
        }
        else {
        if (age < 18 || age == 18) {
        document.getElementById('price').innerHTML = "$50";
        }
        else {
        document.getElementById('price').innerHTML = "$150";
        }
      }
    }
}
}

function testCoupon() {
  var coupon = document.getElementById('coupon').value;
  if (coupon == "YEET") {
  document.getElementById('price').innerHTML = "$0";
  }
  else {
    if (document.getElementById('age').value == 10) {
    document.getElementById('price').innerHTML = "$50";
    }
    else {
    document.getElementById('price').innerHTML = "$150";
    }
  }
}

<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>

<label for="age">Age:</label>
<input type="text" id="age" name="age">

<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">
<input type="text" id="price" name="price">
<input type="submit" name="submit">
 
</form>

Need help using document.getElementById with tag

1 Answers1

Need help using document.getElementById with
tag