I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="https://www.w3schools.com" id="w3s">
W3Schools.com
</a>
</p>
<button>
Change href Value
</button>
<p>
Mouse over the link (or click on it) to see that the value of the href attribute has changed.
</p>
</body>
</html>
First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle
https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>W3Schools.com</p>
<button>Change URL</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var myURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === myURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", myURL);
});
});
</script>
</head>
<body>
</body>
</html>
You can just use a basic if-else and check the href attribute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var w3schoolURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === w3schoolURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", w3schoolURL);
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var w3 = "https://www.w3schools.com";
var w3Jquery = "https://www.w3schools.com/jquery";
var toggleFlag = true;
$("button").click(function(){
if(toggleFlag){
$("#w3s").attr("href", w3Jquery);
}
else{
$("#w3s").attr("href", w3);
}
toggleFlag = !toggleFlag;
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
Related
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings("rmtrail").html());
$(this).siblings("rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I am trying to toggle the inserted .rmtrail element when the .exmore element is clicked but the $(this).siblings(); method is not working. console.log() returns undefined.
Is there a way to force the jQuery DOM to update after an element is inserted? I have been looking online and can not find it.
rmtrail is a class so try .rmtrail
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings(".rmtrail").html());
$(this).siblings(".rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I want to trigger click on an icon(image) with specific class/id using onclick (or using any other way) of another button. Please see image for reference. Clicking "1" should trigger "2". Currently I am calling a javascript function "launchTopWM" which use following code to trigger click:
$(".custom_toggle_menu_default").trigger("click");
But i am wondering if i can call this code or perform this fucntionality using its click etc, something like href='javascript:$(".custom_toggle_menu_default").trigger("click");'
Following is the Code:
HTML 1:
<img class="custom_toggle_menu_default" src="cc/tt/uu/images/launchTopWM.png">
HTML 2:
<a id="tsp" class="sp" href="launchTopWM()">CNw</a>
Give an id to the element and show the second anchor through pure javascript.
<!DOCTPE html>
<html>
<head>
<title> Button style </title>
<style>
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="getElementById('button').click()" > click me </a>
<button id="button"> Buton </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#button').click(function(){
alert('Buttons has been clicked');
});
</script>
</body>
</html>
Trigger example, Hope it will give you the idea
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triggger</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="tiggerCall">Trigger Focus</button>
<input type="text" placeholder="Onclick Call Focus" value=''>
<script>
$( "#tiggerCall" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "input" ).focus(function() {
$( "<span>Text box clicked</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>