I've Encountered a Minor, Annoying Javascript Issue

jaberwacky · April 2, 2014

I'm teaching myself javascript along with general webdev. So, I had the idea to make a webpage where I can input my schedule for the week. This way no one has to ask my schedule they can just navigate there.

The problem that I've encountered is this: I want to highlight an input in yellow if I type "TBA" into an input box. I set the button onclick event to an anonymous function. I go to the page, type TBA, and press the button yet nothing changes. Where is the mess up?

Schdlr.js

<script>

document.getElementByID("set").onclick=function() {
    var sun_start = document.getElementByID("sunday-start");
    
    if (sun_start.value == "TBA") {
        sun_start.value = "To Be Announced";
        sun_start.style.background = "yellow";
        
        var sun_end = document.getElementByID("sunday-end");
        sun_end.value = "To Be Announced";        
        sun_end.style.background = "yellow";
    }
}

</script>

Schdlr.html

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="Schdlr.css"></link>
<script type="text/javascript" src="Schdlr.js"></script>

<title>Schdlr!</title>
</head>

<body>
<div id="schedule-title">
<h1>Schdlr!</h1>
</div>

<datalist id="options">
<option value="TBA">
<option value="Off">
</datalist>

<div id="schedule">
<table>
<tr>
    <td>Sunday:</td>
    <td><input id="sunday-start" list="options" placeholder="Start"></input></td>
    <td><input id="sunday-end" placeholder="End"></input></td>
</tr>
<tr>
    <td>Monday:</td>
    <td><input id="monday-start" list="options"></input></td>
    <td><input id="monday-end"></input></td>
</tr>
<tr>
    <td>Tuesday:</td>
    <td><input id="tuesday-start" list="options"></input></td>
    <td><input id="tuesday-end"></input></td>
</tr>    
<tr>
    <td>Wednesday:</td>
    <td><input id="wednesday-start" list="options"></input></td>
    <td><input id="wednesday-end"></input></td>
</tr>    
<tr>
    <td>Thursday:</td>
    <td><input id="thursday-start" list="options"></input></td>
    <td><input id="thursday-end"></input></td>
</tr>    
<tr>
    <td>Friday:</td>
    <td><input id="friday-start" list="options"></input></td>
    <td><input id="friday-end"></input></td>
</tr>    
<tr>
    <td>Saturday:</td>
    <td><input id="saturday-start" list="options"></input></td>
    <td><input id="saturday-end"></input></td>
</tr>
</table>
</div>

<div id="password">
<input id="pw" type="password" placeholder="Password"></input> (Required)
</div>

<div id="submit">
<button id="set">Set</button>
</div>
</body>
</html>

Schdlr.css

@charset "UTF-8";

#schedule-title { 
    color: green;
    font-size: 100%;
    position: relative;
}

#schedule { 
    color: black;
    font-size: 100%;
    text-align: center;
    position: relative;
}

#password { 
    font-size: 100%;
    position: relative;
    top:20px;
}

#submit { 
    font-size: 100%;
    position: relative;
    top:30px;
}

Edit: better HTML

Edited April 2, 2014 by jaberwacky

Mat · April 2, 2014

That code to set the onclick handler should be inside a window.onload handler.

At least, that's what I seem to remember happening. I've never liked Web development.

jaberwacky · April 2, 2014

Ok, to test that I changed the <body> tage to this: <body onload="alert("test")"> which does absolutely nothing. I don't need to download anything extra like a small webserver or anything do I? I just assumed that the browser could run the javascript.

Mat · April 2, 2014

You also have some misspellings in the javascript. getElementById has a lowercase d at the end.

Other than that I'll have to try and run it to see what's going on.

Mat · April 2, 2014

It works fine here after making the corrections I suggested before.

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#schedule-title { 
    color: green;
    font-size: 100%;
    position: relative;
}

#schedule { 
    color: black;
    font-size: 100%;
    text-align: center;
    position: relative;
}

#password { 
    font-size: 100%;
    position: relative;
    top:20px;
}

#submit { 
    font-size: 100%;
    position: relative;
    top:30px;
}
</style>

<script type="text/javascript">
window.onload = function() {
    document.getElementById('set').onclick = function() {
        alert('Set Clicked');

        var sun_start = document.getElementById("sunday-start");
        
        if (sun_start.value == "TBA") {
            sun_start.value = "To Be Announced";
            sun_start.style.background = "yellow";
            
            var sun_end = document.getElementById("sunday-end");
            sun_end.value = "To Be Announced";        
            sun_end.style.background = "yellow";
        }
    }
}
</script>

<title>Schdlr!</title>
</head>

<body>
<div id="schedule-title">
<h1>Schdlr!</h1>
</div>

<datalist id="options">
<option value="TBA">
<option value="Off">
</datalist>

<div id="schedule">
<table>
<tr>
    <td>Sunday:</td>
    <td><input id="sunday-start" list="options" placeholder="Start"></input></td>
    <td><input id="sunday-end" placeholder="End"></input></td>
</tr>
<tr>
    <td>Monday:</td>
    <td><input id="monday-start" list="options"></input></td>
    <td><input id="monday-end"></input></td>
</tr>
<tr>
    <td>Tuesday:</td>
    <td><input id="tuesday-start" list="options"></input></td>
    <td><input id="tuesday-end"></input></td>
</tr>    
<tr>
    <td>Wednesday:</td>
    <td><input id="wednesday-start" list="options"></input></td>
    <td><input id="wednesday-end"></input></td>
</tr>    
<tr>
    <td>Thursday:</td>
    <td><input id="thursday-start" list="options"></input></td>
    <td><input id="thursday-end"></input></td>
</tr>    
<tr>
    <td>Friday:</td>
    <td><input id="friday-start" list="options"></input></td>
    <td><input id="friday-end"></input></td>
</tr>    
<tr>
    <td>Saturday:</td>
    <td><input id="saturday-start" list="options"></input></td>
    <td><input id="saturday-end"></input></td>
</tr>
</table>
</div>

<div id="password">
<input id="pw" type="password" placeholder="Password"></input> (Required)
</div>

<div id="submit">
<button id="set">Set</button>
</div>
</body>
</html>

I made it a single file to make it easier, but that shouldn't make a difference.

What browser are you using? There are a lot of tools to help web development built in to all the new browsers.

Mat · April 2, 2014

Ok, to test that I changed the <body> tage to this: <body onload="alert("test")"> which does absolutely nothing. I don't need to download anything extra like a small webserver or anything do I? I just assumed that the browser could run the javascript.

And that does absolutely nothing because of the quote marks you've used. Would "alert("test")" work as a string in AutoIt? Nope

jaberwacky · April 2, 2014

Ok, I also made those changes but it still doesn't work for me. I'm using Palemoon (Firefox variant).

Edit: it works when I use the all-in-one that you posted. When I break them out into separate files then it stops working.

Edited April 2, 2014 by jaberwacky

Mat · April 2, 2014

Works here with multiple files.

Here's a zip of the exact files I've just tested with.

Does the firefox developer console show any errors?

Schdlr.zip

jaberwacky · April 2, 2014

Thank you. The only differences I see ~~are you used <button> whereas I used <input type="submit ...>, and~~ I used <script> tags in the Schdlr.js. (Actually, I did change it to <button> at some point. I guess script tags in the js is bad.

Once again thank you for your time! I spent a lot of time going over javascript tutorials trying to find the error. I don't think I would ave ever found the issues on my own.

Edited April 2, 2014 by jaberwacky

Sign In

I've Encountered a Minor, Annoying Javascript Issue

Recommended Posts

jaberwacky

Mat

jaberwacky

Mat

Mat

Mat

jaberwacky

Mat

jaberwacky

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

AutoIt Resources

Release

Beta