Trying to change a link on button click with javascript - javascript

I have three buttons and i want such tha when i click on one button the link on an a tag changes
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="goldpac">Choose Plan</button>
<button class="silverpac">Choose Plan</button>
<button class="bronzepac">Choose Plan</button>
I want such that when i click on one button, it changes the link at .payverlink
I have tried
function bronze()
{
$('.payverlink').href="exbronzeregistrationform.php";
}
function silver()
{
$('.payverlink').href="exsilverregistrationform.php";
}
<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>
But this changes to bronze function onclick of any of the buttons. Please whats the issue.

You could set your javascript code to trigger the button click and avoid using the onclick into html
$(document).ready(function() {
$("button").on('click', function(){
if ($(this).hasClass('goldpac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
} else if ($(this).hasClass('silverpac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
} else if ($(this).hasClass('bronzepac')) {
window.location="http://..."; /* or exbronzeregistrationform.php for example */
}
});
});
You could add one more line in each case changing the a tag, but ti wont make a huge difference in your actions as it isn't used as you click the buttons.
$("a.payverlink").attr("href", "http://...."); /* or exbronzeregistrationform.php for example */
So, you could just remove the 'href' as you contantly will change the url from js.

Use attr or prop, attr stands for attribute and prop for property!
$(
function(){
$('#google').attr('href', 'https://duckduckgo.com/');
//or use prop
$('#duckduckgo').prop('href', 'https://bing.com')
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Learning</title>
</head>
<body>
<h1 class="header"></h1>
<a id="google" href="https://google.com/">google is down!</a>
<br>
<a id="duckduckgo" href="https://duckduckgo.com/">I'm slow...</a>
</body>
</html>

I suspect that both functions are failing, since there is no such property href on JQuery object.
Use this approach instead:
$('.payverlink').prop("href","exbronzeregistrationform.php");

Have you try .prop() method of jQuery hopefully it works .
function bronze()
{
$('.payverlink').prop('href','exbronzeregistrationform.php');
}
function silver()
{
$('.payverlink').prop('href','exsilverregistrationform.php');
}

You can use the .attr function:
function bronze(){
changeLink('exbronzeregistrationform');
}
function silver(){
changeLink('exsilverregistrationform.php');
}
function changeLink(url){
$('.payverlink').attr('href',url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="silverpac" onclick="silver()">Choose Plan silverpac</button>
<button class="bronzepac" onclick="bronze()">Choose Plan bronzepac</button>

function bronze()
{
$('.payverlink').attr("href","exbronzeregistrationform.php");
}
function silver()
{
$('.payverlink').attr("href","exsilverregistrationform.php");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="payverlink" href="exbronzeregistrationform.php">Continue to registration</a>
<button class="goldpac">Choose Plan</button>
<button class="silverpac" onclick="silver()">Choose Plan</button>
<button class="bronzepac" onclick="bronze()">Choose Plan</button>
You can try this. it will helps you. :)

Related

Hide and show functionality not working

I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>

removeProp() not working

I have an input and I want to disable it but it doesn't work at all. Even phpstorm says the function doesn't exist for some reason.. I thought it's a problem with phpstorm, but I tried it in Chrome and it doesn't work.
Is there any alternative or am I doing something wrong? I must point out that button.css('pointer-events', 'none'); works but removeProp doesn't for some reason..
function waitComment() {
var button = $(".btn-primary");
button.css('pointer-events', 'none');
setTimeout(function(){
button.remove('pointer-events');
}, 3000)
}
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">
if you want to disable button, why don't you use disabled property?
function waitComment() {
var button = $(".btn-primary");
button.prop('disabled', true);
setTimeout(function(){
button.prop('disabled', false);
}, 3000)
}
The proper way to achieve your goal is,
CSS
.pointer{
pointer-events: none;
}
Jquery:
function waitComment() {
var button = $(".btn-primary");
button.addClass('pointer');
setTimeout(function(){
button.removeClass('pointer');
}, 3000)
}
Why .removeProp() didn' work?
Jquery .removeProp() is for Html attributes/properties not for CSS properties.
Please find the Api reference of .removeProp
In what way is disabled bugged?..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function waitComment() {
var button = $(".btn-primary");
button.attr('disabled','disabled');
}
</script>
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function waitComment() {
var button = $(".btn-primary");
button.css('pointer-events', 'none');
button.css('color', 'red');
setTimeout(function () {
button.css('pointer-events','');
button.css('color', 'blue');
}, 3000)
}
</script>
</head>
<body>
<input type="submit" class="btn btn-primary" value="Comment" name="comment" id="#comment" class="comment" onclick="waitComment()">
</body>
</html>
here I added a effect on button as follows..
Initially button text color will be Black
on click button color will change to Red
on time out button color will change to Blue
Hope this make help you...
Thanks... :)

Javascript Background Change Colour

I am trying to learn Javascript on my own. So I gave myself a task: Create a button and with that button I can change the background colour. This is what I have done so far. I assume I don't need to run it under localhost like how we usually do PHP? I only drag the file to Google Chrome. So far, after clicking, it doesnt change colour at all. I also wonder why. Would be grateful if someone could point out my error
exe1.html
<html>
<head>
<link rel="stylesheet" href="layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
</head>
<body>
<div class="buttonClickMe">
<button type="button" onclick="changeColour">Click me</button>
</div>
</body>
layout.css
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
Looks like you are trying to implement the click event in two ways:
as a HTML attribute
<button type="button" onclick="changeColour">
In order for this way to work, you should use changeColour as a function:
<button type="button" onclick="changeColour()">
via JS
$('.button').click(function(){ ...
This is the wrong selector for button (the . looks for elements by class name). Instead, use button:
$('button').click(function(){ ...
Either method will work and you only need one.
This should work
$(document).ready(function () {
$('.button').click(function () {
changeColour();
});
});
function changeColour() {
var col = Math.floor(Math.random() * 16777215).toString(16);
$('body').css('background', '#' + col);
}
If you are learning javascript don't jump so fast to jQuery, first do it in plain javascript, like this.
Pure JS
var array = ['black','red','yellow']; //create an array with colors
function changes(){ //create the function
document.bgColor= array[Math.floor(Math.random()* array.length)]; //change the document. for example
}
HTML
<button type="button" onclick="change()">Click me</button>
The selector you're using for the click event does not exist. Add a class to the button for it t work.
Try this:
HTML
<button type="button" class="button">Click me</button>
CSS
$(document).ready(function(){
$('.button').on('click', function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
What you've done is fine,
You should move the button class .button onto the actual button element and remove the onclick and then should work.
Here:
http://jsfiddle.net/745ex5zc/
$('.button').click(function(){...
is referring to a click on a button with the CLASS button.
Simply add class=""button" to your button and it would work, though I'd recommend using id="myId" and using $('#myId').click(function(){ instead.
Give this a try...
JSFiddle https://jsfiddle.net/w6tjtaqy/
<script>
$(document).ready(function(){
$('.button').click(function(){
$('body').css('background', '#' + changeColour());
});
});
function changeColour() {
return Math.floor(Math.random()*16777215).toString(16);
}
</script>
<style>
button
{
background-color: red;
width: 100px;
height: 100px;
}
body
{
text-align: center;
background-color: blue;
}
</style>
<div class="buttonClickMe">
<button type="button" class="button">Click me</button>
</div>

Check what exatly button clicked, when multiple buttons with the same selector on page

I have a two buttons with the same selector class. When I do this:
$('.my_button').click(function() {
console.log(1);
});
, and then click on the button it log 1 two times, like I clicked both buttons instead single. So my question is: There exists some way in JS to get only that button what I clicked, without assign unique selector like id. I am newbien in JS, so can somebody explain me? I found related issue here. Thanks!
Edit:
I make buttons a little bit different. And yes, it returns only single button, but why click trigger works two times. Console log log two times.
Every event listener receives the event, which carries the event target. Try the below example.
$('.my_button').click(function(e) {
console.log(e);
console.log(e.currentTarget);
console.log($(e.currentTarget));
});
use this inside your function code
$('.my_button').on('click',function() {
var tempContainer=$(this).parent();
alert($(tempContainer).html()); // you ll see that you are showing the code where exists your clicked button
});
Assign different id to your buttons
$(".my_button").on("click",function(){
console.log($(this).attr("id"))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="my_button" id="test" value="Test"/>
<input type="button" class="my_button" id="test2" value="Test-2"/>
Try this:
<button class="my_button">Content1</button>
<button class="my_button">Content2</button>
<script>
$( ".my_button" ).click(function( event ) {
console.log(1);
});
</script>
https://jsfiddle.net/nt9ryeyr/5/
Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".p").click(function(e){
alert($(e.currentTarget).attr("value"));//button text on which you clicked
});
});
</script>
</head>
<body>
<input type='button' class="p" value='test'/>
</body>
</html>
if your html is like this
<button class="my_button">Test</button>
<button class="my_button">Test1</button>
then use this script
$('.my_button').click(function() {
if(this.innerHTML ==="Test")
console.log(1);
else
console.log(2);
});
or if your html is like this
<input type="button" class="my_button" value="Test"/>
<input type="button" class="my_button" value="Test1"/>
then use this script
$('.my_button').click(function() {
if($(this).val() ==="Test")
console.log(1);
else
console.log(2);
});

localStorage clears screen

I'm testing out localStorage to see if it can be used in my app, but when I try to store data from a text input box to it, the screen goes blank. How can I fix this? Here is the code:
<html>
<head>
<script type="text/javascript">
function write() {
localStorage.setItem('item', document.getElementById('input').value);
}
function read() {
var data = localStorage.getItem('item');
document.getElementById('display').innerHTML = data;
}
</script>
</head>
<body>
<input id="input" type="text" />
<button type="button" onclick="write()">
Write
</button>
<p id="display">
Display
</p>
<button type="button" onclick="read()">
Read
</button>
</body>
</html>
change your function name from write to something else. it sounds like you are accidentally invoking document.write, which would blank out your entire page.
You cannot use a function called write on the global (document) namespace ... call it something else and it works fine
<input id="input" type="text" />
<button type="button" onclick="somethingelse();">
Write
</button>
<p id="display1">
Display
</p>
<button type="button" onclick="read()">
Read
</button>​
function somethingelse() {
localStorage.setItem('item', document.getElementById('input').value);
}
function read() {
var data = localStorage.getItem('item');
document.getElementById('display1').innerHTML = data;
}​
Working example here
The code inside html event handlers is ran effectively like:
with(document) {
with(this) {
write();
}
}
so your write is shadowed (it calls document.write). You can simply refer to the correct write with window.write():
<button type="button" onclick="window.write()">
Ultimately it's better not to use inline html events at all. A simple button.onclick = write would have worked, where button is reference to the element.

Categories