Why counter is not increasing - javascript

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 a problem with JavaScript onClick function

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;
}

JS function not firing on button click

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.

Moving text using setTimeout in Javascript not working

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';

How to make this IF statement work

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>

GET request into table

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>

Categories