i tried to pop an alert when clicked on a div , didn't really succeed , i messed it a little to practice with objects.
here is the the code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
var start = {
modeBox : function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
the problem : not alerting
why i don't get alert when i click on the div?
live example : http://jsfiddle.net/YqP93/
The following code tested in Firefox and Chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox : function(){
alert('Test');
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
NOTE: the code you posted in jsfiddle is not working, but you can copy and paste the code above that works in browsers mentioned.
this.mine = {
start: {
modeBox : function(){
alert();
}
}
you are trying to declare a var in an object literal. I don't think this is valid js for one but more importantly you can not get at vars declared in that scope. You have to assign the property to the object. You had it right with the modeBox.
Get rid of the var deceleration (why?):
mine = {
start: {
modeBox: function() {
alert();
}
}
};
Demo: http://jsfiddle.net/YqP93/3/
try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var mine = {
start: {
modeBox: function(){
alert();
}
}
}
</script>
</head>
<body>
<div id="askMode" onclick="mine.start.modeBox();">My mine</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
document.getElementById("abc").addEventListener("click", temp2, false);
</script>
</body>
</html>
but I want to show "temp2" first, and then show "temp1"
Is that possible? or the event execution order depends on the browser so I can't change it?
thanks for help!!
Please review this one:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Close window</title>
</head>
<body>
<!-- here is your first AddEventlistener-->
<button id="abc" onclick="temp1()">button</button>
<script type="text/javascript">
function temp1() {
alert("temp1");
};
function temp2() {
alert("temp2");
}
/*then here is your second AddEventlistener*/
var d = document.getElementById("abc");
d.addEventListener("click", temp2, false);
/*javascript will execute it in order
if you want to change the order. remove first EventListener then register new one after. something like this:
*/
//remove listener
d.onclick = null;
//register new
d.addEventListener('click', temp1);
</script>
</body>
</html>
There are a couple of ways in which you can guarantee the order here:
document.getElementById("abc").addEvenListener("click", function() {
temp2();
temp1();
}, false);
Another option would be:
function temp2() {
alert();
temp1(); // call temp1 at the end of temp2
}
document.getElementById("abc").addEventListener("click", temp2, false);
I rarely have to do any Javascript and I seem to fail doing the easiest tasks. I am trying to replace a string in two divs. The first div gets replaced, the second one is not found with the error message:
drawings.html:20 Uncaught TypeError: Cannot set property 'innerHTML' of null
However I tried the usual remedies of putting my code in an 'onload' function and putting the script at the end of the body tag. What else could possibly go wrong?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="cell1">test<div>
<div id="cell2">test<div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
just close your divs elements.
<html>
<head>
</head>
<body>
<div id="cell1">test</div>
<div id="cell2">test</div>
<script>
window.onload = function() {
replace();
}
function replace() {
console.log("replace");
document.getElementById("cell1").innerHTML = "cell1";
document.getElementById("cell2").innerHTML = "cell2";
}
</script>
</body>
</html>
I am looking for a way to run a function if my array contains the word 'AGE'. I am rather terrible at coding but have pieced together this code:
HTML:
<div class="finish" >?</div>
Script:
var co = ["AGE"]
$(document).ready(function(){
$(".finish").click(function(){
if (co.contains("AGE")) {
alert($.unique(co));
return false;
}
});
});
What could be missing? I am sure it should be very easy, but I am not getting anywhere.
I ended up with this version:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var co = ["AGE"];
$(document).ready(function(){
$(".finish").click(function(){
if ($.inArray("AGE", co) >= 0) {
alert($.unique(co));
return false;
}
});
});
</script>
</head>
<body>
<div class="finish" >?</div>
</body>
</html>
Here is the link to the documentation of that helper method from jQuery:
jQuery.inArray().
I am trying to implement module pattern in my code according to some examples online, what I am trying to achieve is to simply bind a button click event in my html to a function (which is not working), below is my HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="button" id="btn-msg" value="click me"/>
</body>
</html>
and here is my JS:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
Here is as well a link to my plunker: http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview
All what am trying to achieve is to bind the button to the function.
You need to call the anonymous function, not assign it. See the () below:
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}());
Here's an updated plunkr with this change: http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info
I believe that Evan Knowles wanted to say this:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
})( );
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
This would work properly if you can use Rutherford as a Singleton.
I've had a look around at 2 or three different ways to do this, however I'm still encountering problems.
With the below I can generate an alert, but nothing gets written to the div
JSON
{
"FixVersion": "Version - 1.2.3",
"BugCount": "27",
"TaskCount": "4",
"StoryCount": "5"
}
JAVASCRIPT ATTEMPT 1
<script type="text/javascript">
function read_project_title() {
$.getJSON("ProjectVersion.json", function(data) {
alert(data["FixVersion"]);
return(data["FixVersion"]);
});
}
</script>
JAVASCRIPT ATTEMPT 2
<script type="text/javascript">
function read_project_title() {
$.getJSON("ProjectVersion.json", function(data) {
var node = document.getElementById('pageTitle');
node.innerHTML(data["FixVersion"]);
});
}
</script>
HTML
<div id="pageTitle"><script>read_project_title();</script></div>
did you tried this way?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="pageTitle"></div>
<script>
function read_project_title() {
$.getJSON("ProjectVersion.json", function(data) {
var node = document.querySelector('#pageTitle');
if (node) {
node.innerHTML = data.FixVersion;
}
});
}
read_project_title();
</script>
</body>
</html>
Try this
<script type="text/javascript">
function read_project_title() {
$.getJSON("ProjectVersion.json", function(data) {
alert(data.FixVersion);
return(data.FixVersion);
});
}
</script>
In your second attempt, simply change the line node.innerHTML(data["FixVersion"]); to:
node.innerHTML = data["FixVersion"];
Hope it helps.
simple fix! just print out all returned data to make sure you're getting what you expect
DEMO
$(function() {
$.getJSON('objects.json',function(data) {
$('#pageTitle').html(data['FixVersion']);
// print data
document.body.innerHTML += JSON.stringify(data, null, 4);
});
});