Jump to content

I've Encountered a Minor, Annoying Javascript Issue

jaberwacky
 Share
Go to solution Solved by Mat,

Recommended Posts

jaberwacky Universalist

jaberwacky

Posted
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

Helpful Posts and Websites: AutoIt3 Variables and Function Parameters MHz | AutoIt Wiki | Using the GUIToolTip UDF BrewManNH | Can't find what you're looking for on the Forum?

Link to comment
Share on other sites
jaberwacky Universalist

jaberwacky

Posted
  • Author
Posted

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.

Helpful Posts and Websites: AutoIt3 Variables and Function Parameters MHz | AutoIt Wiki | Using the GUIToolTip UDF BrewManNH | Can't find what you're looking for on the Forum?

Link to comment
Share on other sites
Mat Universalist

Mat

Posted
Posted

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.

AutoIt Project Listing

Link to comment
Share on other sites
Mat Universalist

Mat

Posted
Posted

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

AutoIt Project Listing

Link to comment
Share on other sites
jaberwacky Universalist

jaberwacky

Posted
  • Author
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

Helpful Posts and Websites: AutoIt3 Variables and Function Parameters MHz | AutoIt Wiki | Using the GUIToolTip UDF BrewManNH | Can't find what you're looking for on the Forum?

Link to comment
Share on other sites
jaberwacky Universalist

jaberwacky

Posted
  • Author
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

Helpful Posts and Websites: AutoIt3 Variables and Function Parameters MHz | AutoIt Wiki | Using the GUIToolTip UDF BrewManNH | Can't find what you're looking for on the Forum?

Link to comment
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...