I am creating a resume site and I'm trying to create a function that will load when the page loads that displays a greeting (as a heading) depending on the time of day. Here is what I have so far (you can ignore the salary calculator part):
<body onload = "onLoad()">
<div id="fulldiv">
<p> Enter the following information to find out if the potential salary is too little, almost enough, or a good salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value ="0.00"/></p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/>
<button value="calculate" onclick="calcSalary(); validateForm(); validateFormH()">Calculate</button></p>
<p id="results"></p>
<p id="resultstext"></p>
<script src="salaryExternal.js" type="text/javascript"></script>
<script type="text/javascript">
function onLoad() {
var d = new Date();
var z = d.getHours();
var greeting;
if (z < 12) {
greeting = "Enjoy the rest of your morning!"
} else if (z < 17) {
greeting = "Enjoy the afternoon!"
} else {
greeting = "Have a good evening!"
}
}
var firstVariable = document.createElement("h1");
var secondVariable = document.createTextNode(d);
firstVariable.appendChild(secondVariable);
document.getElementById("fulldiv").appendChild(firstVariable);
</script>
</div>
Nothing is showing up when I load the page. I'm not sure where to go from here. Any help would be greatly appreciated.
You need to set greeting variable as text node value and move HTML element creation code inside onLoad funtion as follows -
<body onload="onLoad()">
<div id="fulldiv">
<p> Enter the following information to find out if the potential salary is too little, almost enough, or a good salary.</p>
<p>Hourly Wage:
<input type="text" name="wage" id="txt_wage" value="0.00" />
</p>
<p>Hours Per Week:
<input type="text" name="hours" id="txt_hours" value="0.0" />
<br/>
<br/>
<button value="calculate" onclick="calcSalary(); validateForm(); validateFormH()">Calculate</button>
</p>
<p id="results"></p>
<p id="resultstext"></p>
</div>
<script src="salaryExternal.js" type="text/javascript"></script>
<script type="text/javascript">
function onLoad() {
var d = new Date();
var z = d.getHours();
var greeting;
if (z < 12) {
greeting = "Enjoy the rest of your morning!"
} else if (z < 17) {
greeting = "Enjoy the afternoon!"
} else {
greeting = "Have a good evening!"
}
var firstVariable = document.createElement("h1");
var secondVariable = document.createTextNode(greeting);
firstVariable.appendChild(secondVariable);
document.getElementById("fulldiv").appendChild(firstVariable);
}
</script>
The last few lines of your code are defined outside the onLoad function:
function onLoad() {
...
}
var firstVariable = document.createElement("h1");
var secondVariable = document.createTextNode(d);
firstVariable.appendChild(secondVariable);
document.getElementById("fulldiv").appendChild(firstVariable);
which is why it does not work as expected.
Related
I'm creating simple HTML programs with JavaScript. The buttons aren't working when I click on it. Here is my code:
index.html
<!DOCTYPE html>
<html>
<body>
<h1> A random machine</h1>
<p>
Include floating-point number
</p>
<p>
Want an integer? Click here!
</p>
<button id="integerChanges" type="button"> Click me! </button>
<p>
Enter an integer/floating-point number here (start point, included):
<input placeholder="Random number" id="a">
</p>
<br>
<p>
Enter another integer/floating-point number here (end point, not included):
<input placeholder="Random number" id="b">
</p>
<button id="submit"> Submit </button>
<script>
document.getElementById("submit").addEventListener("click", function() {callX()})
document.getElementById("integerChanges").addEventListener("click", function() {
window.location.href="integer.html"
})
a = document.getElementById("a")
b = document.getElementById("b")
a.parseInt()
b.parseInt()
if (a > b) {
throw "start point > end point "
window.location.href="retakeHandler.html"
}
function callX() {
var x = Math.random(document.getElementById("a"), document.getElementById("b"));
console.log(x);
document.querySelector("html").innerHTML = x;
};
function callX2() {
var x2 = Math.floor((Math.random(a,b)) * 10 + 1);
document.querySelector("html").innerHTML = x2;
};
function retakeForm_error() {
var buttonRetake = document.createElement
}
</script>
</body>
</html>
integer.html
<!DOCTYPE html>
<html>
<body>
<h1> A random machine</h1>
<p>
Include floating-point number
</p>
<p>
Want an integer? Click here!
</p>
<button id="integerChanges" type="button"> Click me! </button>
<p>
Enter an integer/floating-point number here (start point, included):
<input placeholder="Random number" id="a">
</p>
<br>
<p>
Enter another integer/floating-point number here (end point, not included):
<input placeholder="Random number" id="b">
</p>
<button id="submit"> Submit </button>
<script>
document.getElementById("submit").addEventListener("click", function() {callX()})
document.getElementById("integerChanges").addEventListener("click", function() {
window.location.href="integer.html"
})
a = document.getElementById("a")
b = document.getElementById("b")
a.parseInt()
b.parseInt()
if (a > b) {
throw "start point > end point "
window.location.href="retakeHandler.html"
}
function callX() {
var x = Math.random(document.getElementById("a"), document.getElementById("b"));
console.log(x);
document.querySelector("html").innerHTML = x;
};
function callX2() {
var x2 = Math.floor((Math.random(a,b)) * 10 + 1);
document.querySelector("html").innerHTML = x2;
};
function retakeForm_error() {
var buttonRetake = document.createElement
}
</script>
</body>
</html>
retakeHandler.html
<!DOCTYPE html>
<html>
<body>
<h1>
Error: start point > end point
</h1>
<p id="retakeForm"></p>
<script>
function retake() {
var myP = document.getElementById("retakeForm");
// creating button element
var button = document.createElement('BUTTON');
// creating text to be
//displayed on button
var text = document.createTextNode("Click me");
// appending text to button
button.appendChild(text);
// appending button to div
myP.appendChild(button); ;
}
</script>
</body>
</html>
Edited many versions (this is version 3 or 4 now) and added files
Public on Repl.it with name: ElectronicFatherlySale
Notes:
Code isn't done
Please help me and explain why this happens?
I see few small mistakes in your code:
document.getElementById("a") = a; does not mean anything, because you are trying to set a value to something cannot be modified
You have declared two functions, callX and callX2, but you never call them. I suggest you to do the following first:
--
<script>
document.getElementById("submit").addEventListener("click", function () {
callX();
callX2();
})
function callX() {
var x = Math.random(document.getElementById("a"), document.getElementById("b"));
console.log(x);
document.querySelector("html").innerHTML = x;
};
function callX2() {
document.getElementById("integerChanges").addEventListener("click", function () {
var x2 = Math.floor((Math.random(a, b)) * 10 + 1);
document.querySelector("html").innerHTML = x2;
})
};
</script>
I'm pretty new to HTML, and I'm trying to make a simple login system. I'm using Sublime Text 3 and "If" statements in JavaScript don't work. When I type 'if' in script, it goes purple, not JavaScript blue. Am I bad or is Sublime not working at all?
Code:
<html>
<body>
Kullanıcı adı: <input type="text" id="kadi">
<br>
Şifre:<input type="text" id="sifre">
<br>
<button type="button" onclick="fun()">Giriş Yap</button>
<p id="p"></p>
<script type="text/javascript">
function fun(){
var gkadi = document.getElementById().value;
var gsif = document.getElementById().value;
var dkadi = "ali";
var dsif = "aa123"
if(gkadi==dkadi){
if(gsif==dsif){
document.getElementById("p").innerHTML = "Giriş başarılı!";
} else {
document.getElementById("p").innerHTML = "Şifre yanlış";
}
} else {
document.getElementById("p").innerHTML = "Kullanıcı adı yanlış.";
}
}
</script>
</body>
</html>
The syntax coloring can be misleading. It's not your if statement that is having problems. It's that getElementById() expects one argument which should be the id of the element that you are trying to get. With that change, your code works fine.
function fun() {
var gkadi = document.getElementById("kadi").value;
var gsif = document.getElementById("sifre").value;
var dkadi = "ali";
var dsif = "aa123"
if (gkadi == dkadi) {
if (gsif == dsif) {
document.getElementById("p").innerHTML = "Giriş başarılı!";
} else {
document.getElementById("p").innerHTML = "Şifre yanlış";
}
} else {
document.getElementById("p").innerHTML = "Kullanıcı adı yanlış.";
}
}
Kullanıcı adı: <input type="text" id="kadi">
<br> Şifre:
<input type="text" id="sifre">
<br>
<button type="button" onclick="fun()">Giriş Yap</button>
<p id="p"></p>
I have a problem. When I want to log in, I get "ERROR" every time, although I enter good login details.
I am completely beginner in JavaScript and HTML, so please bear with me :-)
There is code:
function login() {
var login = document.getElementById("login");
var password = document.getElementById("haslo");
var lGOOD = "adi282123";
var pGOOD = "qaz123qaz123";
var status;
if (login === lGOOD && password === pGOOD) {
greeting = "OK";
} else {
greeting = "ERROR";
}
document.getElementById("demo").innerHTML = greeting;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Zaloguj się</p>
<br id=login><input type="text" name="login"><br>
<br id=haslo><input type="text" name="password">
<button onclick="login()">Zaloguj się !!!</button>
<p id="demo"></p>
<script>
</script>
</body>
</html>
There are two issues in your code:
You have set id to the wrong elements. You have to set id's to input elements.
You have to take the value from the input element
function login() {
var login = document.getElementById("login").value;
var password = document.getElementById("haslo").value;
var lGOOD = "adi282123";
var pGOOD = "qaz123qaz123";
var status;
if (login === lGOOD && password === pGOOD)
{
greeting = "OK";
}
else
{
greeting = "ERROR";
}
document.getElementById("demo").innerHTML = greeting;
}
<p>Zaloguj się</p>
<br><input id="login" type="text" name="login"><br>
<br><input id="haslo" type="text" name="password">
<button onclick="login()">Zaloguj się !!!</button>
<p id="demo"></p>
Any help is appreciated and my code is posted below.
I've read my course book, followed the instructions of my professor, gone on youtube, read forums and still don't know why my button is not running my function when I click it. Please help.
HTML:
<!doctype html>
<head>
<h1>Exercise 3-1</h1>
<script src ="X_3_1.js"></script>
</head>
<body>
<p>Enter First Name:
<input type="text" id="firstName">
<br>
Do you have children?:
<input type="text" id="children">
<br>
If so, how old is your oldest child?:
<input type="text" id="oldestChild">
<br>
<input type="button" onclick="processInfo()" value="Submit Information">
<br>
<span id="mymsg">*</span>
</p>
</body>
</html>
JS:
function processInfo()
{
var firstName = document.getElementById("firstName").value;
var children = document.getElementById("children").value;
var oldestChild = document.getElementById("oldestChild").value;
var childrenLower = children.toLowerCase();
var today = new Date ();
if(childrenLower == "yes" || childrenLower == "y")
{
if(isNaN(oldestChild)){
mymsg.firstChild.nodeValue = oldestChild + " is not a number";
} else if(oldestChild <= 19){
mymsg.firstChild.nodeValue = "You still have kids at home";
} else if(oldestChild >= 19){
mymsg.firstChild.nodeValue = "Hopefully they have moved out of the
house";
}
} else if(childrenLower != "yes" || childrenLower != "y") {
mymsg.firstChild.nodeValue = "It must be peacefule at home, " +
firstName + "on this date of " today;
}
}
I figured it out. I was missing a + sign before the variable today on the last line. Thanks anyway.
This is supposed to calculate circumference, however, I am only getting a zero returned. What am I doing wrong?
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts";
var Pi = 3.14159265;
var dia = document.getElementById("txtdia");
var circumf = dia * Pi;
function DisplayText(){
document.getElementById("txtcircumf").value = circumf;
}
</script>
</head>
<body>
<form>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/><br>
<input type="text" name="txtdia" />
<input type="text" name="txtcircumf" />
<input type="button" value="Change Text" onclick="DisplayText()"/>
</form>
</body>
</html>
The primary problem you have is that this script will run prior to your dom being ready. As a result, even if you were properly grabbing the diameter's value it still wouldn't work, since document.getElementById("txtdia") wouldn't return anything.
I would just fetch the diameter's value each time.
function DisplayText(){
var dia = document.getElementById("txtdia").value;
var circumf = dia * Pi;
document.getElementById("txtcircumf").value = circumf;
}
The other option of course is to put this entire script after your html. Ie
</body>
<script type="text/javascript">
var index = false;
var text = "This text shifts";
There are 3 distinct issues which you need to fix for this to work correctly.
txtcircumf and textdia are the name of the elements, not the id, so using document.getElementById will fail.
Fix: Add that as an id onto the elements in question:
<input type="text" name="txtdia" id="txtdia" />
<input type="text" name="txtcircumf" id="txtcircumf" />
The elements are not present when the script first runs. This is the issue described by #AdamRakis and his fix is probably best - always retrieve the value when you need it:
function DisplayText(){
var dia = document.getElementById("txtdia").value;
var circumf = dia * Pi;
document.getElementById("txtcircumf").value = circumf;
}
A minor point, but when you read the .value of a field you get text, as you are doing a mathematical equation it is common practice to ensure the value you're wouking with is numeric. You can use parseFloat for this:
function DisplayText(){
var dia = parseFloat(document.getElementById("txtdia").value);
var circumf = dia * Pi;
document.getElementById("txtcircumf").value = circumf;
}
I made a couple structural changes that improve the overall quality of your code :) (see the arrows for changes)
<html>
<body>
<form>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/><br>
<input type="text" name="txtdia" />
<input type="text" name="txtcircumf" />
<input type="button" id="derp" value="Change Text" /> //<-- added ID, removed inline JS
</form>
<script type="text/javascript">
document.getElementById("derp").onclick = function() { //<-- use this style instead of inline onclicks!
var index = false;
var text = "This text shifts";
var dia = document.getElementById("txtdia").value; //<-- .value, not the whole element!
var circumf = dia * Math.PI; //<-- Math.PI is an object constant, very handy
document.getElementById("txtcircumf").value = circumf;
//no more standard function!
}
</script>
</body>
</html>