Reference Error/Javascript Fails to Load:Please help ASAP.

Pinapple Pink
Pinapple Pink used Ask the Experts™
on
Problem:

Encountering Reference Error/.JS file unable to load. The goal is to have input from the user displayed in another text field.  Then reset the first input field so that new info can be put in. The code is 97% complete with all HTML requirements including methods and variables in the .js file. The code is in vanilla javascript and HTML. Located below and saved as a .txt for upload compatibility to the site.

Attempted solutions: Initializing the anonymous function to a variable did not work. Looking for a solution ASAP. Plugins/extra frameworks/Jquery cannot be used.
THECURRENTASSIGN1CODE91518.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey there,

I've had a look through your code, and I can't really figure out what you're trying to do. There's a lot of 'odd' looking code in there that doesn't really do anything. You say you're getting a 'Can't load file' error. The code you've posted has a <script> tag that tries to load the tshirt1.js. I'm guessing all the JS code at the bottom of your upload is actually stored in this file.

If you explain what you're trying to do, maybe we can help you out.
Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi Pineapple,

Please see the code below, per our discussion

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Activity 1:Table</title>
    <link rel="stylesheet" href="radioalignment.css">
    <script type="text/javascript" src="tshirt1.js"></script>
</head>
<body>
    <table id="tableOne" border="1">
        <tr>
            <th>Full Name:
            </th>
            <td width="147.9">
                <input type="text" name="FullName" id="fname">
            </td>
        </tr>
        <tr>
            <th>Member ID:
            </th>
            <td>
                <input type="text" name="MemberID" id="mid1">
            </td>
        </tr>
        <tr>
            <th>
                <img src="TShirts.jpg" alt="Tshirt">
            </th>
            <td>
                <select id="tshirtsSelect" onchange="document.getElementById('co').value = this.options[this.selectedIndex].value;">
                    <option value="small" id="sm">Small</option>
                    <option value="medium" id="me">Medium</option>
                    <option value="large" id="la">Large</option>
                    <option value="xlarge" id="xl">X-Large</option>
                    <option value="xxlarge" id="xxl">XX-Large</option>
                    <option value="xxxlarge" id="xxxl">XXX- Large</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>You Choose:
            </th>
            <td>
                <input type="text" name="youchoose" id="co" value="">
            </td>
        </tr>
        <tr>
            <th>Color:
            </th>
            <td>
                <input type="radio" name="Color" id="w" value="White">
                <label for="w">White</label>
                <input type="radio" name="Color" id="s" value="Silver">
                <label for="s">Silver</label>
                <input type="radio" name="Color" id="r" value="Red">
                <label for="r">Red</label>
                <input type="radio" name="Color" id="b" value="Blue">
                <label for="b">Blue</label>
            </td>
        </tr>
        <tr>
            <th>Delivery Option
            </th>
            <td>
                <input type="radio" name="delivery" id="dh">Delivered To Home<br>
                <input type="radio" name="delivery" id="dw">Delivered to Work
            </td>
        </tr>
    </table>
    <button id="pushme" onclick='inputAccept();'>Confirm Your Order!</button>
    <button id="reset" onclick='resetMe(); return false'>Reset</button>
    <br>
    <br>
    <table id="resultTable" border="1">
        <tr>
            <th>Name:
            </th>
            <td>
                <input type="text" name="FullName2" id="fname2" readonly>
            </td>
        </tr>
        <th>Member ID:
        </th>
        <td>
            <input type="text" name="MemberID2" id="mid2">
        </td>
        <tr>
            <th>Size:
            </th>
            <td>
                <input type="text" name="Size" id="size" value="" readonly>
            </td>
        </tr>
        <tr>
            <th>Color:
            </th>
            <td>
                <input type="text" name="ColorR" id="cr" readonly>
            </td>
        </tr>
        <th>Delivery Option:
        </th>
        <td>
            <input type="text" name="Deliver" id="dh2" readonly>
        </td>
    </table>
    <p id="uinput" name="dmessage"></p>
    <script>
        document.getElementById("pushme").addEventListener("click", document.inputAccept);
        document.getElementById("reset").addEventListener("click", document.resetMe);
    </script>
</body>

</html>

Open in new window


JavaScript
var fullname;
    var memberid;
    var dropdown;
    var dropdown2;
    var delivery;
    var cselect;
    var displaydelivery;
    var resetme = 1;

    document.inputAccept = function () {

        //sets the value of id to empty text field{
        document.getElementById("fname2").value = document.getElementById("fname").value;
        document.getElementById("mid2").value = document.getElementById("mid1").value;
        document.getElementById("co").value = document.getElementById("tshirtsSelect").options[document.getElementById("tshirtsSelect").selectedIndex].value;
        document.getElementById("size").value = document.getElementById("tshirtsSelect").options[document.getElementById("tshirtsSelect").selectedIndex].value;

        var colors = document.getElementsByName("Color");

        for (var i = 0; i < colors.length; i++) {
            if (colors[i].checked) {
                document.getElementById("cr").value = colors[i].value;
            }
        }
        if (document.getElementById("dh").checked) {
            document.getElementById("dh2").value = "Delivered To Home";
        }
        else if (document.getElementById("dw").checked) {
            document.getElementById("dh2").value = "Delivered To Work";
        }

        //displayResult();
    }

    //function displayResult() {
    //    if (delivery === 0) {
    //        displaydelivery.document.getElementById("dh2").value = "Home";
    //    }
    //    if (delivery == 1) {
    //        displaydelivery.document.getElementById("dw2").value = "Work";
    //    }
    //}

    document.resetMe = function () {

        document.getElementById("fname").value = "";
        document.getElementById("mid1").value = "";
        document.getElementById("tshirtsSelect").selectedIndex = 0;
        document.getElementById("co").value = "";

        var colors = document.getElementsByName("Color");

        for (var i = 0; i < colors.length; i++) {
            colors[i].checked = false;
        }
        document.getElementById("dh").checked = false;
        document.getElementById("dw").checked = false;
    }

Open in new window


Regards,
Chinmay.

Author

Commented:
Hello,

Thanks to all who have helped and left comments! I'm leveling from Back-End Programming to Front-End, so there were some slight syntax differences between the two languages that were worked out.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial