Beginner, learning, but have issues

I’m working through a beginners book on JavaScript and as I go along I’ve been pasting the example code into a file and running it on my system to see functionality in three browsers (MS Edge, Firefox, and Chrome).

I’m, currently in a chapter dealing with web forms and the example code for selection boxes isn’t working right for some reason (all example code to this point has worked without issue). The code should list the days of the week with two buttons: “Remove Wednesday from the list” and “Add Wednesday from the list.” The list and the buttons are displayed correctly in all three browsers.

The code should remove Wednesday from the list when that button is clicked, and the other button is supposed to add it back in. If you click to add while Wednesday is in the list, it presents a pop-up asking if you really want to have two Wednesdays.

Unfortunately, MS Edge and Firefox do absolutely nothing when the buttons are clicked. Chrome sort of works. The remove button does remove Wednesday from the list, but clicking the add button doesn’t add Wednesday back, it adds another Sunday instead (and subsequent clicks keep adding Sundays to the list). If I click the add Wednesday button while Wednesday is in the list, I do get the pop-up like I should.

I was wondering if someone could look it over and maybe find why this code isn’t working (I’m not smart enough in javascript yet to figure it out on my own). I’m concerned that I will incorrectly learn the syntax or method use since this one doesn’t work. Here’s the example:

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Chapter 11: Example 7</title>
</head>
<body>
    <form action="" name="theForm">
        <select name="theDay" size="5">
            <option value="0" selected="selected">Monday</option>
            <option value="1">Tuesday</option>
            <option value="2">Wednesday</option>
            <option value="3">Thursday</option>
            <option value="4">Friday</option>
            <option value="5">Saturday</option>
            <option value="6">Sunday</option>
        </select>
        <br />
        <input type="button" value="Remove Wednesday" name="btnRemoveWed" />
        <input type="button" value="Add Wednesday" name="btnAddWed" />
        <br />
    </form>

    <script>
        var theForm = document.theForm;

        function btnRemoveWedClick() {
            var options = theForm.theDay.options;

            if (options[2].text == "Wednesday") {
                options[2] = null;
            } else {
                alert("There is no Wednesday here!");
            }
        }

        function btnAddWedClick() {
            var options = theForm.theDay.options;

            if (options[2].text != "Wednesday") {
                var lastOption = new Option();
                options[options.length] = lastOption;

                for (var index = options.length - 1; index > 2; index––) {
                    var currentOption = options[index];
                    var previousOption = options[index - 1];

                    currentOption.text = previousOption.text;
                    currentOption.value = previousOption.value;
                }

                var option = new Option("Wednesday", 2);
                options[2] = option;
            } else {
                alert("Do you want to have TWO Wednesdays?");
            }
        }

        theForm.btnRemoveWed.addEventListener("click", btnRemoveWedClick);
        theForm.btnAddWed.addEventListener("click", btnAddWedClick);
    </script>
</body>
</html>

Funny enough, when I ran this on Firefox, it threw an error:

SyntaxError: illegal character

at this line for (var index = options.length - 1; index > 2; index––) {

So I tried removing these - then type them again manually, and it worked for me.

1 Like

Yep, I got the same thing as @tkhquang when I popped your code into VSC. After I retyped the – it ran fine in all three browsers.

So, you’re saying to delete the “-” (dashes), retype them and it should work?

(Edited) So, I did, and there ya go, it works in all three. :roll_eyes:

Just wondering why I got no error notices.

And I did copy and paste that code into notepad, so there shouldn’t have been any weird control characters or anything. That’s just weird.