In IE9, this code does not change the size of button as intended...
<html><head>
<script language="JavaScript">
function fun1()
{
alert("clicked");
document.form1.chk1.disabled=true;
}
function m1()
{
document.form1.chk1.width=60;
}
function m2()
{
document.form1.chk1.width=40;
}
</script>
</head><body>
<form name="form1"><!-- creating radio button group -->
<input type="button" name="chk1" value="red" onClick="fun1()"
onMouseOver="m1()" onMouseOut="m2()">
</form>
</body></html>
well there was this style attribute missing in your code. try replacing this
document.form1.chk1.style.width="60%";
this worked with me
Your code does not work not only in IE9 but, for example, in FF13 and Chrome19.
To workaround this problem, you can try to replace your m1() and m2() functions as:
function m1()
{
document.form1.chk1.style.width=60+"px";
}
function m2()
{
document.form1.chk1.style.width=40+"px";
}
Related
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. :)
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);
});
Below example is working for enable/disable of href but not for onclick. I need to enable/disable for both attributes
Note: I cant simply remove/bind the onclick event to dummy function() as it need once we enable it.
Script Code:
<script type="text/javascript">
$(document).ready(function () {
$("#b1").click(function () {
$("#yahoo").attr("disabled", "disabled");
$("#yahoo").css("background-color", "silver");
})
$("#b2").click(function () {
$("#yahoo").removeAttr("disabled");
$("#yahoo").css("background-color", "white");
})
$("#yahoo").click(function (e) {
if ($("#yahoo").attr("disabled") == "disabled") {
e.preventDefault();
}
});
});
</script>
HTML Code:
<div>
<input type="button" id="b1" value="Disable Yahoo Link">
<input type="button" id="b2" value="Enable Yahoo Link">
</div>
<a id="yahoo" target="_blank" href="javascript:alert('href alert')" onclick="javascript:alert('onclick alert')">Yahoo.com</a>
Working Example
http://jsfiddle.net/nunnakirankumar/suYe4/
Inside your click() function, you need to explicitly return false (after discovering it's disabled). Otherwise the default handler will cause the browser to go to or run the designated href.
The OP has most likely moved on, so this answer is really just for google searchers' sake.
Problem-
Button colour is not changing,
I used jquery click function
<button class="red" id="MyQuotes" href="#" title="">#Aceo.Crm.App.Resources.Shared.Order.Link_MyQuote</button>
For this button i used jquery as
$(document).ready(function(){
$("#MyQuotes").click(function(){
$(this).css({background:"red"});
});
});
But it was not successfull, I tried to do this in this way too-
<button class="red" onclick="D()" id="MyQuotes" href="#" title="">#Aceo.Crm.App.Resources.Shared.Order.Link_MyQuote</button>
I made javascript function here as-
<script language="javascript">
function D()
{
document.body.style.backgroundColor="red";
}
</script>
And yes this time i was again failed.
Can you please suggest me some codes?
Using jQuery: http://jsfiddle.net/DrWjq/
$(document).ready(function(){
$("#MyQuotes").click(function(){
$(this).css({background:"red"});
});
});
Pure JS: http://jsfiddle.net/wx9tw/
function D(id)
{
id.style.backgroundColor="red";
}
<button class="red" onclick="D(this)" id="MyQuotes" href="#" title="">#Aceo.Crm.App.Resources.Shared.Order.Link_MyQuote</button>
your selector's id is "MyQuotes" and not "MyOrders"
try this
$("#MyQuotes").click(function(){
$(this).css({background:"red"});
});
OR
function D()
{
$('#MyQuotes').css({background:"red"});
}
You must refer the button (SO #MyQuotes not #MyOrders) in JS:
$(document).ready(function(){
$("#MyQuotes").click(function(){
$(this).css({background:"red"});
});
});
You can use $(this).css("background-color","red"); (and target the correct element id)
fiddle
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.