please help me solve this code guys I am stuck here I am new to JavaScript that's why I can't solve this simple error
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
YS.innerHTMLÂ = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
function srt() {
counter++;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" onclick="srt()">
<h4>Start</h4>
</div>
</center>
</body>
</html>
I hope you understand my question please help me if you can
Thanks In Advance
Your counter is increasing, but you didn't show the change when it's increasing.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
}
function srt() {
console.log(counter);
counter++;
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" >
<button onclick="srt()">Start</button>
</div>
</center>
</body>
</html>
next time, use console.log() to do debugging
On Start div click you need to update your other Div to show the updated value.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
var scr1 = 0;
var scr2 = 0;
var counter = 0;
window.onload = function () {
var YS = document.getElementById("YS");
var CS = document.getElementById("CS");
var mid = document.getElementById("mid");
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
function srt() {
counter++;
mid.innerHTML = counter;
YS.innerHTML = "Your Score : " + scr1 + counter ;
CS.innerHTML = "Com Score : " + scr2 ;
}
</script>
</head>
<body>
<h2 class="scr1" id="YS">Your Score :</h1>
<h2 class="scr2" id="CS">Com Score :</h2>
<br />
<br />
<center>
<div class="mid" id="mid"><p>0</p></p></div>
<div class="srt" id="none" onclick="srt()">
<h4>Start</h4>
</div>
</center>
</body>
</html>
Related
I have started doing a game, kinda similar to 'Spend Bill Gates Money', but I've said to change it up a bit.
I've done the first item, and I've tried to edit it with JS, so everytime you press "Buy", it will remove 1 dollar from you, or, when you press "Sell" to give you 1 dollar. The problem is, everytime I click, it only counts once. Plus, if I press "Buy", then "Sell", it gives me instantly 11 dollars, instead of 10 dollars.
Filename: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Spend you own money</title>
<script src="script.js">
</script>
<link rel="stylesheet" href="style.css">
<body>
<noscript>You need to enable javascript in order to have fun!</noscript>
<h1 class="center" id = "money">Money Left: 10</h1><!--Money = 100 000 000 000-->
<div class= "main">
<div class="pen">
<h2>Pen</h2>
<input type="submit" class="sell" value="Sell" onclick="sellpen()">
<!-- <input type="text" class="amount" value = 0 id = "amountpen" readonly="readonly" size="9%"> -->
<input type="submit" class="buy" value="Buy" onclick="amountpen()" >
</div>
</div>
</body>
</head>
</html>
Filename: script.js
var money = 10; //dollars
var pen = 1; // dollar
var mpen = money-pen;
var ppen = money+pen;
function amountpen() {
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+
Your script.js would be like this:
var money = 10;
var pen = 1;
function amountpen() {
var mpen = money-pen;
document.getElementById("money").innerHTML = "Money Left: " + mpen;
money = money-1;
}
function sellpen() {
var ppen = money+pen;
document.getElementById("money").innerHTML = "Money Left: " +ppen;
money = money+1;
}
You can try with this JS code :
money = 10; //dollars
function amountpen() {
money--;
document.getElementById("money").innerHTML = "Money Left: " + money;
}
function sellpen() {
money++;
document.getElementById("money").innerHTML = "Money Left: " +money;
}
EDIT: The "Create New Startup" button works with the "run code snippet" button in Stack Overflow, but not with index.html in chrome...
I have a button that's not firing the JS function.
Here's the HTML:
<button onclick="chooseStartup()" id="create">Create New Startup</button>
And here's the JS function:
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
Any idea why it's not working?
After I fix this issue, how would I go about making the favorite button save the generated sentence -- and then clicking the print button to display all the saved favorites?
All my code is below
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
function chooseStartup() {
var x = startupX[Math.floor(Math.random()*startupX.length)];
var y = startupY[Math.floor(Math.random()*startupY.length)];
document.getElementById('startupX').innerHTML = x;
document.getElementById('startupY').innerHTML = y;
};
<!DOCTYPE html>
<html>
<head>
<title>Mad Lib</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1 id="xForY"></h1>
<h1>A startup that is
<span id="startupX"></span>, but for
<span id="startupY"></span>
</h1>
<div id="inputs">
<button onclick="chooseStartup()" id="create">Create New Startup</button>
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
</div>
<h2 id="favorites">
</h2>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='js/madlib-console.js'></script>
</body>
</html>
To favorite and then print it do the following: STEP 1
Change from this:
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>
To this:
<button onclick="doFav()" id="save">Favorite Startup</button>
<button onclick="printFav()" id="print">Print Favorites</button>
STEP 2
Insert the following code on the <script></script> portion of your HTML:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
} return ""; }
function doFav(){setCookie('myFav','A startup that is '+document.getElementById('startupX').innerHTML+' but for '+document.getElementById('startupY').innerHTML,1);}
function printFav(){document.getElementById('favorites').innerHTML = getCookie('myFav');}
Then pay attention because the setting of cookies locally is disabled by default. If you try this code online you will see that it runs without errors.
Hello I'm doing a tutorial and the text "Yoo" is suppose to move right but it doesn't. Ty
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x;
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
Variable x is never defined and you should provide the left in px as
txt.style.left = x_pos + "px";
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x_pos + "px";
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
Variable x is never defined. Try:
txt.style.left = x_pos;
instead of
txt.style.left = x;
So that your final code is
<!DOCTYPE html>
<html>
<head>
<script>
var timer, x_pos=0, txt;
function _timer() {
txt = document.getElementById("txt");
x_pos = x_pos+1;
txt.style.left = x_pos;
timer = setTimeout(_timer, 50);
}
</script>
</head>
<body onload="_timer()">
<h1 id="txt" style="position:absolute; left:0"> Yooo </h1>
</body>
</html>
you had forget add unit :)
txt.style.left = x+'px';
Ok, I'm trying to have the code run so people enter an amount of money and then it shows an estimate of how much they make daily. I want it to have an ERROR pop up if the textbox has no numbers in it. How should I do this?
This is my current code:
<!DOCTYPE html>
<html>
<head>
<title> MoneyPerYear </title>
<link type="text/css" rel="stylesheet" href="money.css">
</head>
<body>
<p id="header"> Enter yearly income to estimate daily earnings </p>
<input type="text" id="textmoney">
<div onclick="moneyFunction()" id="moneydiv"> <p id="divtext">Calculate</p> </div>
<p id="demo"></p>
<script>
function moneyFunction() {
var money = document.getElementById('textmoney').value;
var dailyE = money/365;
document.getElementById('demo').innerHTML = (dailyE);
}
if ( document.getElementById('textmoney').value; == 0) {
document.getElementById('demo').innerHTML = "ERROR";
}
</script>
</body>
</html>
So here is all of it:
<!DOCTYPE html>
<html>
<head>
<title> MoneyPerYear </title>
<link type="text/css" rel="stylesheet" href="money.css">
</head>
<body>
<p id="header"> Enter yearly income to estimate daily earnings </p>
<input type="text" id="textmoney">
<button onclick="moneyFunction()" id="moneydiv"> <p id="divtext">Calculate</p> </button>
<p id="demo"></p>
<script>
function moneyFunction() {
var money = document.getElementById('textmoney').value;
if ( document.getElementById('textmoney').value == 0) {
alert("Error");
}
var dailyE = money/365;
document.getElementById('demo').innerHTML = (dailyE);
}
</script>
</body>
</html>
function moneyFunction() {
var money = +(document.getElementById('textmoney').value) || 0; //parse required
var dailyE = money / 365;
//var result = money === 0 ? 'ERROR' : dailyE;
var result = money === 0 ? 'ERROR' : parseFloat(dailyE).toFixed(3); //round-off
document.getElementById('demo').innerHTML = result;
} //closing bracket
#moneydiv {
border: 1px solid grey;
padding: 5px;
background: skyblue;
display: inline-block;
cursor: pointer;
}
<p id="header">Enter yearly income to estimate daily earnings</p>
<input type="text" id="textmoney">
<div onclick="moneyFunction()" id="moneydiv">
<p id="divtext">Calculate</p>
</div>
<p id="demo"></p>
I have this next html document, which has to load a table, which is filled with the values I get back from a XMLHttpRequest.
when I try to run the page, it won't give anything like a table back, so if anyone sees what's the problem in this code, please help!!
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
initialiseListEvenementen();
};
initialiseListEvenementen() {
var BASE_URL = "http://localhost:8080/OnzeBuurt2/resources/";
var events = [];
//load the groups from the back-end
var request = new XMLHttpRequest();
request.open("GET", BASE_URL + "events");
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
}
function createListElementForEvent(eventIndex) {
var datum = $("<p>").text("Datum: " + events[eventIndex].datum);
var titel = $("<p>").text("Titel: " + events[eventIndex].titel);
var details = $("<p>").text("Details: " + events[eventIndex].details);
var auteur = $("<p>").text("auteur: " + events[eventIndex].auteur.naam);
var latitude = $("<p>").text("Datum: " + events[eventIndex].locatie.latitude);
var longitude = $("<p>").text("Datum: " + events[eventIndex].locatie.longitude);
return $("<li>").append(datum).append(titel).append(details).append(auteur).append(latitude).append(longitude);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
<ul id="eventList" class="lijst"></ul>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</div>
</body>
</html>
after couple of hours of work, I found the solution. Hope i can help some of you:
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Evenementen | Sociale buurt</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="onzebuurt.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var url = "http://localhost:8080/OnzeBuurt2/resources/events";
var events = [];
$(document).ready(function() {
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function() {
if(request.status === 200) {
events = JSON.parse(request.responseText);
for(var i = 0; i < events.length; i++) {
$("#eventList").append(createListElementForEvent(i));
}
if(events.length > 0) {
$("#eventList").listview('refresh');
} else {
console.log("Error");
}
} else {
alert("fout gegaan");
console.log("Error loading groups: " + request.status + " - "+ request.statusText);
}
};
request.send(null);
});
function createListElementForEvent(eventIndex) {
var datum = $("<td>").text(events[eventIndex].datum);
var titel = $("<td>").text(events[eventIndex].titel + " - " + events[eventIndex].details);
var auteur = $("<td>").text(events[eventIndex].auteur.naam);
return $("<tr>").append(datum).append(titel).append(auteur);
}
</script>
</head>
<body class="body2">
<div class="gridContainer clearfix">
<div class="header2">
<center>
Evenementen
</center>
</div>
</div>
<div class="tabelEvents">
<table id="eventList" class="tabel" border="1">
<tr><th>Datum</th><th>Titel</th><th>Auteur</th></tr>
</table>
</div>
<div id="home2">
<form name="input" action="" method="get">
<img src="home.png" alt="Home" />
</form>
</div>
<div id="terug2">
<form name="input" action="" method="get">
<img id="btnterug" src="vorige.png" alt="Vorige" />
</form>
</div>
</body>
</html>