If / then problem

I am a newbee to JS and am having a problem with the if / then function.
I have a form that has a text field with name=“Bowler1” and id=“Bowler1”
and this is the script I am using:
var form = document.forms[0];
var total = 0;
var EventCost = 35;
var AllEventCost = 10;
var BonusEventCost = 5;
Bowler1.addEventListener(‘change’, function () {
if (Bowler1.value = “”) {
Bowler1Cost = 0
} {
Bowler1Cost = EventCost
}
})

form.TotalAmount.value = total

What I want to happen is if the text box is null then Bowler1Cost should be 0 else it should be EventCost which = 30

When I open the form in Chrome and then open the Console and run the code, when I put something in the text box and tab to the next field, the value in the text box disappears. I am not sure why.
If I do not run the code in the console, the name stays in the box. So I am assuming it is something with the code.

Should there be something between the } { ?

if (Bowler1.value = "") {
Bowler1Cost = 0
} {
Bowler1Cost = EventCost
}

Starter I posted I saw the else was missing. Thanks

1 Like

I put the else in there but it still erases the text box when I tab out of it.

Ah, I thought it was fixed. Oh well.

Please post the HTML for the form.

eg.

```
<form>

</form>
```

 <form action="https://formspree.io/office@swcbowl.com" method="POST" class="open">
                    <p class="open"><label for="TeamName">Team Name: </label>
                        <input type="text" name="TeamName" id="TeamName" />
                        <input type="hidden" name="_subject" value="Open Tournament Entry" />
                        <label for="Division"> Division: </label>
                        <select name="Division" id="division">
                        <option>Select One</option>
                        <option>Handicap</option>
                        <option>Scratch</option>
                        <option>Senior</option>
                    </select></p>
                    <p class="open"><label for="TeamCenter">Team Home Center: </label>
                        <input type="text" name="TeamCenter" id="TeamCenter" />
                        <label for="CaptEmail">Captain's Email: </label>
                        <input type="text" name="_replyto" id="CaptEmail" placeholder="for confirmation" /></p>
                    <p></p>
                    <fieldset>
                        <Legend class="open"> Team - - - Team - - - Team - - - Team </Legend>
                        <p class="open">
                            <label for="TeamSquad">Team Squad:</label>
                            <select name="TeamSquad" id="TeamSquad">
                        <option>Select One</option>
                        <option>Squad 1 - 11/5 1:00pm</option>
                        <option>Squad 2 - 11/6 10:00am</option>
                        <option>Squad 3 - 11/6 1:00pm</option>
                        <option>Squad 4 - 11/12 1:00pm</option>
                        <option>Squad 5 - 11/13 10:00am</option>
                        <option>Squad 6 - 11/13 1:00pm</option>
                    </select>
                        </p>
                        <p></p>
                        <table>
                            <tr class="open">
                                <td class="open">&nbsp;&nbsp;<br/>Capt.</td>
                                <td class="open">&nbsp;&nbsp;<br/>Bowlers Name</td>
                                <td class="open">&nbsp;&nbsp;<br/>USBC#</td>
                                <td class="open">Average for<br/>2015-16</td>
                                <td class="open">Team<br/>Bonus</td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="radio" name="radgroup" value="Bowler1"></td>
                                <td class="open">1- <input type="text" name="Bowler1" id="Bowler1" size="20" /></td>
                                <td class="open"><input type="text" name="usbc1" id="usbc1" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage1" id="Average1" size="5" /></td>
                                <td class="open"><input type="checkbox" name="Team1bonus" id="Team1bonus" /></td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="radio" name="radgroup" value="Bowler2"></td>
                                <td class="open">2- <input type="text" name="Bowler2" id="Bowler2" size="20" /></td>
                                <td class="open"><input type="text" name="usbc2" id="usbc2" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage2" id="Average2" size="5" /></td>
                                <td class="open"><input type="checkbox" name="team2bonus" id="team2bonus" /></td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="radio" name="radgroup" value="Bowler3"></td>
                                <td class="open">3- <input type="text" name="Bowler3" id="Bowler3" size="20" /></td>
                                <td class="open"><input type="text" name="usbc3" id="usbc3" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage3" id="Average3" size="5" /></td>
                                <td class="open"><input type="checkbox" name="team3bonus" id="team3bonus" /></td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="radio" name="radgroup" value="Bowler4"></td>
                                <td class="open">4- <input type="text" name="Bowler4" id="Bowler4" size="20" /></td>
                                <td class="open"><input type="text" name="usbc4" id="usbc4" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage4" id="Average4" size="5" /></td>
                                <td class="open"><input type="checkbox" name="team4bonus" id="team4bonus" /></td>
                            </tr>
                        </table>
                    </fieldset>
                    <p></p>
                    <fieldset>
                        <Legend class="open"> Doubles - - - Doubles - - - Doubles - - - Doubles </Legend>
                        <p class="open">
                            <label for="DoublesSquad">Doubles Squad:</label>
                            <select name="DoublesSquad" id="DoublesSquad">
                        <option>Select One</option>
                        <option>Squad 1 - 11/5 1:00pm</option>
                        <option>Squad 2 - 11/6 10:00am</option>
                        <option>Squad 3 - 11/6 1:00pm</option>
                        <option>Squad 4 - 11/12 1:00pm</option>
                        <option>Squad 5 - 11/13 10:00am</option>
                        <option>Squad 6 - 11/13 1:00pm</option>
                    </select>
                        </p>
                        <p></p>
                        <table>
                            <tr class="open">
                                <td class="open">&nbsp;&nbsp;<br/>Bowlers Name</td>
                                <td class="open">USBC# if<br/>Not Above</td>
                                <td class="open">Average if<br/>Not Above</td>
                                <td class="open">Doubles<br/>Bonus</td>
                            </tr>
                            <tr class="open">
                                <td class="open">1- <input type="text" name="Bowler5" id="Bowler5" size="20" /></td>
                                <td class="open"><input type="text" name="usbc5" id="usbc5" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage5" id="Average5" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler5bonus" id="bowler5bonus" /></td>
                            </tr>
                            <tr class="open">
                                <td class="open">2- <input type="text" name="Bowler6" id="Bowler6" size="20" /></td>
                                <td class="open"><input type="text" name="usbc6" id="usbc6" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage6" id="Average6" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler6bonus" id="bowler6bonus" /></td>
                            </tr>
                            <tr>
                                <td style="padding: 0;">&nbsp;&nbsp;</td>
                            </tr>
                            <tr class="open">
                                <td class="open">1- <input type="text" name="Bowler7" id="Bowler7" size="20" /></td>
                                <td class="open"><input type="text" name="usbc7" id="usbc7" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage7" id="Average7" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler7bonus" id="bowler7bonus" /></td>
                            </tr>
                            <tr class="open">
                                <td class="open">2- <input type="text" name="Bowler8" id="Bowler8" size="20" /></td>
                                <td class="open"><input type="text" name="usbc8" id="usbc8" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage8" id="Average8" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler8bonus" id="bowler8bonus" /></td>
                            </tr>
                        </table>
                    </fieldset>
                    <p></p>
                    <fieldset>
                        <Legend class="open"> Singles - - - Singles - - - Singles - - - Singles </Legend>
                        <p class="open">
                            <label for="SinglesSquad">Singles Squad:</label>
                            <select name="SinglesSquad" id="SinglesSquad">
                        <option>Select One</option>
                        <option>Squad 1 - 11/5 1:00pm</option>
                        <option>Squad 2 - 11/6 10:00am</option>
                        <option>Squad 3 - 11/6 1:00pm</option>
                        <option>Squad 4 - 11/12 1:00pm</option>
                        <option>Squad 5 - 11/13 10:00am</option>
                        <option>Squad 6 - 11/13 1:00pm</option>
                    </select>
                        </p>
                        <p></p>
                        <table>
                            <tr class="open">
                                <td class="open">&nbsp;&nbsp;<br/>Bowlers Name</td>
                                <td class="open">USBC# if<br/>Not Above</td>
                                <td class="open">Average if<br/>Not Above</td>
                                <td class="open">All<br/>Events</td>
                                <td class="open">Doubles<br/>Combine</td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="text" name="Bowler9" id="Bowler9" size="20" /></td>
                                <td class="open"><input type="text" name="usbc9" id="usbc9" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage9" id="Average9" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler9allevents" id="bowler9allevents" /></td>
                                <td class="open"><input type="checkbox" name="bowler9combine" id="bowler9combine" /></td>
                            </tr>
                            <tr>
                                <td style="padding: 0;">&nbsp;&nbsp;</td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="text" name="Bowler10" id="Bowler10" size="20" /></td>
                                <td class="open"><input type="text" name="usbc10" id="usbc10" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage10" id="Average10" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler10allevents" id="bowler10allevents" /></td>
                                <td class="open"><input type="checkbox" name="bowler10combine" id="bowler10combine" /></td>
                            </tr>
                            <tr>
                                <td style="padding: 0;">&nbsp;&nbsp;</td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="text" name="Bowler11" id="Bowler11" size="20" /></td>
                                <td class="open"><input type="text" name="usbc11" id="usbc11" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage11" id="Average11" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler11allevents" id="bowler11allevents" /></td>
                                <td class="open"><input type="checkbox" name="bowler11combine" id="bowler11combine" /></td>
                            </tr>
                            <tr>
                                <td style="padding: 0;">&nbsp;&nbsp;</td>
                            </tr>
                            <tr class="open">
                                <td class="open"><input type="text" name="Bowler12" id="Bowler12" size="20" /></td>
                                <td class="open"><input type="text" name="usbc12" id="usbc12" size="10" /></td>
                                <td class="open"><input type="text" name="Avgerage12" id="Average12" size="5" /></td>
                                <td class="open"><input type="checkbox" name="bowler12allevents" id="bowler12allevents" /></td>
                                <td class="open"><input type="checkbox" name="bowler12combine" id="bowler12combine" /></td>
                            </tr>
                        </table>
                    </fieldset>
                    <div class="buttonarea">
                        <p></p>
                        <input type="text" name="TotalAmount" id="TotalAmount" placeholder="Amount Owed" size="10" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" value="Submit Your Entry" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset" value="Clear the Form" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a class="open" href="https://squareup.com/store/suburban-windy-city-usbc" target="_blank">Pay for Your Entry</a>
                        <p></p>
                    </div>
                </form> 

From what I’m seeing of your scripting code, that the = assignment should be a === comparison instead.
And, Bowler1Cost doesn’t look to exist anywhere in the form.

1 Like

Bowler1Cost is var higher in the script
Thanks for the input. I will try it tomorrow.

I tested your HTML at
https://validator.w3.org/nu/#textarea

One was for
<label for="Division"> because “Division” does not match “division” - case matters.

And there were 4 because

<tr>
  <td style="padding: 0;">&nbsp;&nbsp;</td>
</tr>

in a table where all the other rows have 4 or 5 cells won’t do.

If you don’t want to add empty <td></td>s you should add
colspan="4" (or 5 as the case may be) to those rows.

In a table, all rows need the same number of cells (columns) or colspan needs to be used to make a cell count for more than it actually is.

Thanks Mittineague.
I will make those changes, but does that affect the JS results?
I changed the"=" to “===” and that fixed that problem.
Working in the counsel, every thing works okay except the last 2 lines:
total = total + Bowler1Cost;
form.TotalAmount = total;
I am guessing it something with syntax, but no errors show up and it is like it shows in the book I am using for reference.
Thanks again for the help.

This may be a silly thing on my part, but you have the total being updated OUTSIDE the change handler – so it’s never being run when the change handler runs. Move it inside, just after the if / else.
Also, where in the HTML form is the TotalAmount field?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.