Button colour not changing - javascript

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

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>

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

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);
});

HTML/DOM: Mouse-events to change button

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";
}​

Get ID of clicked on element in function

I want to get the ID of an element I click on.
I put the function in the onclick element, like this:
<a id="myid" class="first active" onclick="markActiveLink();" href="#home">Home</a>
And this is in the function:
function markActiveLink() {
alert($(this).attr("id"));
}
This doesn't work, as it says it isn't defined.
Does it really forget about the ID, do I have to type it in the onclick?
Try: onclick="markActiveLink(this);" and
function markActiveLink(el) {
alert($(el).attr("id"));
}
why using an inline handler? Move to unobtrusive js
$(document).ready(function(){
$('#myid').bind('click', function(){
alert($(this).attr('id'));
});
});
You have to pass the element to the function. JS itself isn't smarter than you :)
html:
<a id="myid" class="first active" onclick="markActiveLink(this);" href="#home">Home</a>
js:
function markActiveLink(e) {
alert(e.id);
}
Do not use $(this) because it does accidentally return the element you added the bind. When you click on an inner element, it also returns the outer element.
<div id="outer">
<div id="inner">
</div>
</div>
You better use the following appearance:
$("#outer").bind('click', function(e) {
if(e.target.id === "inner")
{
alert("you clicked the inner element");
}
else
{
alert("you clicked the outer element");
}
});
You can find a fiddle here: http://jsfiddle.net/vqab7jdo/1/
I try all the ways, spend almost 2 hours and finally found the best way I prefer
try it: < div onclick="div_Clicked(this.id)" id="some"/>
function div_Clicked(itemName) { alert(itemName); }

Categories