Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.
Related
I have an html markup like this.
<html>
<head></head>
<body>
<input type="checkbox" id="Randomly generated ID" onclick="fun()">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>
On clicking the checkbox i want to add a css style to label tag using fun() function in javascript.
I am having trouble in doing so, plus both the elements have a randomly generated ID and cannot have same ID's.
Here is the implementation using Vanilla Js.
function fun(inputElement) {
var backgroundColor = inputElement.checked ? 'yellow' : 'white';
var labelSelector = 'label[for="' + inputElement.id + '"]';
var labelElement = document.querySelector(labelSelector);
inputElement.style.background = backgroundColor;
labelElement.style.background = backgroundColor;
}
<html>
<head></head>
<body>
<input type="checkbox" id="CHECKBOX_ID" onclick="fun(this)">
<label for="CHECKBOX_ID" id="Randomly generated ID">SOME TEXT</label>
</body>
</html>
Hope this will help you, thanks.
You can get the specific clicked input element and apply css style on it
Here's a simple example using jQuery:
$('input[type="checkbox"]').on('click', function(){
$(this).toggleClass('fun-class');
});
I have a this html page, Whenever the element with class name FreeSeat is clicked I want to change the colour of that div element.Below is my html page
<html>
<head>
<title>
QuickBus
</title>
<link type="text/css" rel="stylesheet" href="Seat.css">
</head>
<body>
<div id="Bus">
<div class="Row">
<div class="FreeSeat" ></div>
<div class="FreeSeat" ></div>
<div class="ResSeat" ></div>
<div class="ResSeat" ></div>
<div class="ResSeat" ></div>
</div>
</div>
<body>
</html>
It will be very helpful if anyone can help me out with this .
Considering that you want to use pure JS and not any library, you'd have to manually add event listeners to your classes.
And it has been solved for a similar problem here
var freeclass = document.getElementsByClassName("FreeSeat");
var myFunction_Free = function() {
this.style.color = "blue";
}
for(var i=0;i<freeclass.length;i++){
freeclass[i].addEventListener('click', myFunction_Free, false);
}
But for your case, here's a working fiddle
JQuery is amazing for these sorts of things.
Say you have a div with id 'box1'
<div id='box1'></div>
Style it with css
#box1 {
width:100px;
height:100px;
background-color:white;
border:1px solid black;
}
Using JQuery, you can make this call:
$( "#box1" ).click(function() {
$('#box1').css('background-color', 'red');
});
And now whenever your div is clicked, the colour will change, you can customise this however much you like.
Here is a JSFiddle demo.
Also, since you didn't specify exactly what you want to change the colour of, in my example jquery, it is telling the browser that when a div with an id of box1is clicked, change the background-color of the div with an id of box1, you can change anything though.
If you have a <p> tag you can change that too when the div is clicked, hope this helped!
You can use the following method to change the background color of an element by class:
const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';
Each element can be referenced by its index:
free_seat[0] // first div
free_seat[1] // second div
Therefore, we can create a function that will be called whenever the click event is delivered to the target:
const change_color = () => {
this.style.backgroundColor = '#ff0';
};
for (let i = 0; i < free_seat.length; i++) {
free_seat[i].addEventListener('click', change_color);
}
Note: You can also use document.querySelectorAll('.FreeSeat') to obtain a NodeList of elements of a certain class.
You can use simply the css focus pseudo-class for this:
#foo:focus {
background-color:red;
}
<div id="foo" tabindex="1">hello world!</div>
Dont forget to set the tabindex.
How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp
<INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
<INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementsById("save").style.visibility="visible";}
}
</script>
DEMO
It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.
HTML:
<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">
JS:
var edit = document.getElementById("edit");
var save = document.getElementById("save");
edit.onclick = function() {
save.style.visibility = "visible";
}
CSS:
#save {
visibility: "hidden";
}
Must be a long day.
You have a misspelling.
Not right
document.getElementsById
Right Way
document.getElementById
document.getElementById("save").style.visibility="visible";
use getElementById not getElementsById
Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
{document.getElementById("save").style.visibility="visible";}
}
</script>
Side note: You may want to tidy your code:
<SCRIPT LANGUAGE="JavaScript">
function btnEdit()
{
document.getElementById("save").style.visibility="visible";
}
</script>
<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.
From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');
Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});
I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );
I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter
<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>
What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.
How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?