Sign in to follow this  
Followers 0
jaberwacky

I've Encountered a Minor, Annoying Javascript Issue

9 posts in this topic

#1 ·  Posted (edited)

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



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.

1 person likes this

Share this post


Link to post
Share on other sites

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

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. 

1 person likes this

Share this post


Link to post
Share on other sites

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.

1 person likes this

Share this post


Link to post
Share on other sites

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

1 person likes this

Share this post


Link to post
Share on other sites

#7 ·  Posted (edited)

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

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

1 person likes this

Share this post


Link to post
Share on other sites

#9 ·  Posted (edited)

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  
Followers 0