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

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
Pinapple PinkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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.
1
Chinmay PatelChief Technical NinjaCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pinapple PinkAuthor 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.