Jump to content
Sign in to follow this  
jaberwacky

I've Encountered a Minor, Annoying Javascript Issue

Recommended Posts

jaberwacky

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 by jaberwacky

Share this post


Link to post
Share on other sites
Mat

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.

  • Like 1

Share this post


Link to post
Share on other sites
jaberwacky

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.

Share this post


Link to post
Share on other sites
Mat

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. 

  • Like 1

Share this post


Link to post
Share on other sites
Mat

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.

  • Like 1

Share this post


Link to post
Share on other sites
Mat

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 :)

  • Like 1

Share this post


Link to post
Share on other sites
jaberwacky

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 by jaberwacky

Share this post


Link to post
Share on other sites
jaberwacky

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 by jaberwacky

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.