This code should work fine, but i don't know where it is getting stuck!
This code is very simple, and it should work, I think the problem is the 3rd parameter that is passed ("mouseup", function(){}, false)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('reveal').innerHTML("Clicked");
},false);
</script>
</body>
</html>
You have a problem with the innerHTML and the id of the div Reveal
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
Regards.
Please try adding click event instead of mouseup.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("click" , function(e){
e.preventDefault();
//document.getElementById('reveal').innerHTML("Clicked");
},false);
</script>
</body>
</html>
Try this,
document.getElementById('reveal').innerHTML = "Clicked";
Because innerHTML is property not a function.
Also you have a typo in your code, 'Reveal' is the id of DIV.
You need the following corrections, please see the snippet below
1) .innerHtml is not a method, its a property so you must use =
2) getElementById are case sensitive so document.getElementById('reveal') must be document.getElementById('Reveal')
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
innerHTML is a property, not a mutator method. The syntax are as follows:
Return the innerHTML property:
HTMLElementObject.innerHTML
Set the innerHTML property:
HTMLElementObject.innerHTML=text
In your case, it should be: document.getElementById('reveal').innerHTML = "Clicked";
Also, the last parameter for the addEventListener is optional. It is a Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.
e.preventDefault does not prevent either mouseup or mousedown. Check this answer. You must use click() or addEventListener("click", to use preventDefault.
Example:
document.getElementById('navlink').addEventListener("click" , function(e){
And in your code you made a mistake of using innerHTML as a function and reveal has a capital R, so the corrected form is
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("click" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
</script>
</body>
</html>
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
I'm using Vanilla Javascript,
I have two pages, page01.html and page02.html these pages share the same navigation system.
I want to load a parameter into the url of page01, and after I click page02 on navigation, page02 will load with the parameter within its URL.
example:
I'm on page01.html
I load a param into the URL, so now I have page01.html/?param=X
I click the menu item page02
I want to load page02.html/?param=X
Is there any way to do this without using localStorage and sessionStorage?
Here's a simple solution using vanilla JavaScript:
Page01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 1</div>
go to page 2
<script>
var linkToPage2 = document.querySelector("a[href='page02.html']");
linkToPage2.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page02.html" + location.search;
}
});
</script>
</body>
</html>
Page02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Page 2</div>
go to page 1
<script>
var linkToPage1 = document.querySelector("a[href='page01.html']");
linkToPage1.addEventListener("click", function(e){
e.preventDefault();
if(location.search){
window.location.href = "page01.html" + location.search;
}
});
</script>
</body>
</html>
I used both Bergi's comment and Henry's answer to create my own version.
Basically I just created a onclick="menuClick();" and an id="menuLink" on the a tag.
Then on the Javascript I just added the location.search to the href:
menuClick = function() {
document.getElementById('menuLink').href += location.search
}
I would like to know how to access a parent element when it doesn't have any identifier. Typically I want to do the following:
<td>
<a title="mySweetTitle"/>
</td>
Access the "td" using his "a" child to modify his properties.
you should use parentElement property https://developer.mozilla.org/en/docs/Web/API/Node/parentElement
example:
document.getElementById('your_id').parentElement
in your case you can use
document.getElementsByTagName('a')[0].parentElement
Maybe this could help you:
$("a").bind("click" , function(){
var parent = $(this).parent();
});
what you are looking for ist $(this).parent() look at my example
i hope it helps
$(document).ready(function() {
$('.test').on('click', function() {
$(this).parent().append("<button>test2</button>");
});
});
<!doctype HTML>
<html>
<head>
<title>Test Umgebung</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<button class="test">test</button>
</div>
</body>
</html>
I want my datepicker to open only under condition, in this case the presence of a class, here's the not working code:
$('.ui-datepicker-trigger').click(function(e){
if ($(this).hasClass('disableDatepicker')) {
e.preventDefault();
}
});
Thanks!
This should be work
$("input").datepicker({
beforeShow: function(a,b){
if ($(this).hasClass('disableDatepicker')) return false;
}
});
http://jsfiddle.net/scTwm/2/
Try with 'not' selector or method
Selector
$('.ui-datepicker-trigger:not(.disableDatepicker)').click(function(e){
//your code
});
Method
$('.ui-datepicker-trigger').not('.disableDatepicker').click(function(e){
//your code
});
It's similar to what you did, you can find a live example here that I've created for you ( http://jsbin.com/kikok/1/ ).
Or check the code that is self explanatory:
$(document).ready(function(){
$(".click").on("click", function(e){
if ( $(this).hasClass("prevent") ) {
console.log("hasClass prevent!");
e.preventDefault();
}
});
});
The html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta name="description" content="" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="click" href="//google.com" target="_blank">Click1</a>
<a class="click prevent" href="//google.com" target="_blank">Click2</a>
</body>
</html>
Hope this helps!
I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
switch.js
var switch = (function() {
var red = document.body.getElementById('red');
var square = document.body.getElementById('square');
red.onclick = function() {
square.src = 'img/red.png';
}
})();
You're running your code before the elements exist.
Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.
You have two issues.
First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it.
var xswitch = (function() {
Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
<script src="switch.js" type='text/javascript'></script>
</body>
</html>
Make the following changes in order to ensure that the DOM has loaded.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
<script type="text/javascript">
window.onload = function () {
switchFn();
};
</script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
JavaScript (switch.js)
var switchFn = function () {
var red = document.getElementById('red');
var square = document.getElementById('square');
red.onclick = function () {
square.src = 'img/red.png';
}
};