Is there a way to detect if an global Boolean values changes from false to true with jQuery?
Yes, use a getter/setter pair of which the setter traps the setting of the variable: http://jsfiddle.net/M768B/.
(function() {
var val = false;
Object.defineProperty(window, "something", {
get: function() {
return val;
},
set: function(v) {
val = !!v; // `!!` to force setting a boolean
alert("Changed to " + val);
}
});
})();
Keep an array of function callbacks as "observers". When anything changes the Boolean through your interface function (e.g. setBooleanValue(True); ) then iterate through the callback array and call each function to notify the observers.
The solution might be
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Object - watch () method example</title>
</head>
<body>
<h1 style="color: red">JavaScript Object : watch() method</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[ o = {x:10}
o.watch("x",
function (id,oldvalue,newvalue) {
document.writeln("o." + id + " changed from "
+ oldvalue + " to " + newvalue+"<br />")
return newvalue
})
o.x = 20
o.x = 30
o.x = 40
//]]>
</script>
</body>
</html>
Compatible with:
Internet Explorer 7
Firefox 3.6
Google Chrome 7
Safari 5.0.1
Opera 10
Seen here.
Related
Here is my Html Full File:
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Evolution Idle Game</title>
<link rel="stylesheet" href="idlescreen.css">
</head>
<body>
<p id="EvolPoints" class="evol-points">0 EvolutionPoints</p>
<button onclick="Upgrade()">Click to Upgrade</button>
<button onclick="BuyPointsPerClick()" id="perClickUpgrade" >Click to Start Automation</button>
<script src="main.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
Here is my full Javascript File:
Main.js
var gameData = {
Points: 0,
PointsPerClick: 1,
PointsPerClickCost: 10
}
const perClickUpgrade = document.getElementById("perClickUpgrade");
perClickUpgrade.addEventListener("click", function handleClick() {
perClickUpgrade.textContent = "Upgrade Evolution Level (Currently Level " + gameData.PointsPerClick + ") Cost: " + gameData.PointsPerClickCost + " Points";
});
function Upgrade() {
gameData.Points += gameData.PointsPerClick
document.getElementById("EvolPoints").innerHTML = gameData.Points + " Evolution Points"
}
function BuyPointsPerClick() {
if (gameData.Points >= gameData.PointsPerClickCost) {
gameData.Points-= gameData.PointsPerClickCost
gameData.PointsPerClick += 1
gameData.PointsPerClickCost *= 2
document.getElementById("EvolPoints").innerHTML = gameData.Points + " Evolution Points"
document.getElementById("perClickUpgrade").innerHTML = "Upgrade Evol Level (Currently Level " + gameData.PointsPerClick + ") Cost: " + gameData.PointsPerClickCost + " Points"
}
var mainGameLoop = window.setInterval(function() {
Upgrade()
}, 1000)
I have tried setting Points >= 10 and using various functions, but the functions do not run when the points get to ten or above. I appreciate any help! Re-posted to provide full code and hopefully a better explanation.
One example function that I have done as a test and added on is (which did not activate during program run):
function LevelTen() {
if (gameData.Points >= 10 ) {
alert("This is an alert message box."); // display string message
}
I've also added the variable LevelTen which equals ten (to avoid setting the comparison to an integer incase that was the problem). This is the alternative function, which also did not work.
function LevelTen() {
if (gameData.LevelTen <= gameData.PointsPerClick) {
alert("This is an alert message box."); // display string message
}
}
Thank you again!
I am learning JavaScript.
I've written this code, but it does not seem to run.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript">
function nav(){
try{
var str="<table border=1>";
for (var n in navigator){
str+="<tr><td>" + n + "</td></tr>";
}
str+="</table>
return("jetzt wird das Ding aufgelistet: <br/>" + str);
}catch(e){return(e);}
}
function writeit(){
document.write(nav());
}
</script>
<title>for learning purpos</title>
</head>
<body>
<form>
<script>
document.write(nav());
</script>
<p>press the button to get the properties in navigator</p>
<input type="button" id="btnNavigator" value="get" onclick="writeit();"/>
</form>
</body>
</html>
You haven't closed one string.
str+="</table>";
Best practice is to look into the console from developer tab, inspect page. Also on that tab on the bottom, you can try javascript code or even jQuery if you have the library added.
Your code it's wrong at line 13 you have Invalid or unexpected token because you didn't close the string and at line 30 nav it's not defined.
You can use this code:
function navBuild(n)
{
var tblS = "<table>";
var tblE = "</table>";
var strTrTd = "";
for (i=1; i<=n; i++)
{
strTrTd = strTrTd + "<tr><td>" + i + "</td></tr>";
}
var strAll = tblS + strTrTd + tblE;
console.log(strAll);
document.getElementById("contentBox").innerHTML = strAll;
}
And in your HTML you could use:
<input type="button" id="btnNavigator" value="get" onclick="navBuild(5);"/>
<div id="contentBox"></div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function abc()
{
ansArray = ['a'];
document.write('<input type = "button" value = "a">');
document.write('<input type = "button" value = "b">');
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a')
myButton[0].style.backgroundColor = "green";
else
myButton[0].style.backgroundColor = "red";
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b')
myButton[1].style.backgroundColor = "green";
else
myButton[1].style.backgroundColor = "red";
}
}
</script>
</head>
<body onload="abc()">
</body>
</html>
This code segment is to change the colour of the two buttons on click event,works fine in chrome and firefox but the onclick functions does not work in IE9. Please help... Thanks in advance
Try calling the function like
(function abc(){
// code here
})();
Also use ; after each function expression, i.e. myButton[0].onclick = function() {...};.
Working here.
I'm trying to make jQuery take JSON file and put the data from it on a simple site, when a button is pressed.
So, the JSON code looks like this:
{
"images" : [
{ "source" = "images1", "alternative" = "altImg1" },
{ "source" = "images2", "alternative" = "altImg2" },
{ "source" = "images3", "alternative" = "altImg3" }
]
}
And the HTML + jQuery:
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button>Press Me!</button>
<script>
$('button').click(function() {
$.getJSON('json-db.html', function(data) {
for(var i = 0; i < data.images.length; i++) {
var image = data.images[i];
$('#result').append('<h1>' + image.source + ' ' + image.alternative + '</h1>');
}
});
});
</script>
<div id="result">Result</div>
</body>
</html>
There are no errors detected by Firebug. I rewrote the code several times, looked for mistakes, compared it to a similar code and so on, but couldn't find anything.
Thanks in advance!
your json notation is wrong
use : instead of = like:
..........
"images" : [
{ "source" : "images1", "alternative" : "altImg1" },
....................
]
..........
Why is this code working? I want to take the input variable and getting the emails out of it. It's not working though. Can someone help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var email = /[a-z0-9\.&%]+#(?:[a-z1-9\-]+\.)+[a-z]{2,4}/i;
var input = "hi4d#gmail.com#gmail.com text here shaagd4##fdfdg.ct hefds#4564dh-dsdgd.ly";
var testout = true;
var output;
while(testout === true)
{
var execoutput = email.exec(input);
testout = email.test(input);
if(!output) {output = '';}
if(testout === true)
{
output += "<p>An email found was: " + execoutput[0] + ".</p>";
input = input.substring(execoutput[0].length);
}
}
document.write(output);
</script>
</head>
<body>
</body>
</html>
Try this: (on jsfiddle)
var email = /[a-z0-9\.&%]+#(?:[a-z0-9\-]+\.)+[a-z]{2,4}/i;
var input = "hi4d#gmail.com#gmail.com text here shaagd4##fdfdg.ct hefds#4564dh-dsdgd.ly";
var output = '';
for (;;) {
var execoutput = email.exec(input);
if (!execoutput) {
break;
}
output += "<p>An email found was: " + execoutput[0] + ".</p>";
input = input.substring(execoutput.index + execoutput[0].length);
}
document.write(output);
Note a few problems I've corrected:
The regex did not match the 0 character in the domain part. None of your input strings contained this character in the domain part, but it was a bug nonetheless.
You can't just pull off the first N characters of the input string when N is the length of the matched string, because it may not have matched at position 0. You have to add the index of the match too, or you might match the same address multiple times.
As mentioned in the comment, the code works.
It should however be duly noted I just slapped your code straight into my current project (Yay for messing up stuff!) and it works just fine there too.
HOWEVER it does not LOOK right, nor provide the correct output I suspect you want.