I need a select form that will change the class of a div element. From the sample code below, how can I use JavaScript to change the class of div(myBox) depending on the selection.
<html>
<head>
<style type="text/css">
.red {background:#FF0000;color:#FFF}
.white {background:#FFF;color:#000}
.blue {background:#0000FF;color:#FFF}
</style>
</head>
<body>
<form id="myform" action="#">
<select id="bgcolor">
<option value="red">Red</option>
<option value="white">White</option>
<option value="blue">Blue</option>
</select>
</form>
<div id="myBox" class="red">This is myBox</div>
</body>
</html>
Handle the onchange event of the select element and change the class of the div:
document.getElementById('bgcolor').onchange = function(){
document.getElementById('myBox').className = this.value;
};
Related
I'm trying to display a piece of styled text below a dropdown using the change function, the problem is the option that triggers the change is the first option when the page loads, and because it's disabled (which it needs to be), there is no way to change to it
Instead, I'm wondering if there is an alternative to change that loads the function when the page loads
Just to be clear, the text should not be visible when any other value is selected from the dropdown
I'm also struggling with assigning a class name to the printed text, I have commented out what I thought should work
Days of numerous different code examples, and although I'm closer than a few days ago, I still can't figure out the proper way
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#reports').change(function() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
});
});
</script>
</body>
</html>
The desired result is have the "styled" text appear when the page loads, but disappear when any other option from the dropdown is selected
add onchange="hide()" to <select...> and add div with text in body and after change just hide it.
<!DOCTYPE html>
<html>
<head>
<title>Reports</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
select {
outline: none;
}
</style>
</head>
<body>
<select id="reports" class="w3-select w3-border" style="font-size: 20px;" name="reports" onchange="hide()">
<option value="0" disabled selected>- Choose -</option>
<optgroup label="Reports">
<option value="1">Report 1</option>
<option value="2">Report 2</option>
<option value="3">Report 3</option>
<option value="4">Report 4</option>
</optgroup>
</select>
<div id="msg">"Choose Report From Menu"</div>
<script type="text/javascript">
function hide() {
msg.style.display='none';
};
</script>
</body>
</html>
If you're trying to execute that function one time when the page loads, try something like this:
$(document).ready(function () {
function reportsChange() {
if ($(this).val() == "0") {
var x = document.createElement("div");
// class = "w3-center w3-text-light-green"
x.textContent = "Choose Report From Menu";
document.body.appendChild(x);
}
}
$('#reports').change(function () {
reportsChange();
});
reportsChange();
});
This will execute the "reportsChange" function once when loading the page, and it will also be available for you to use whenever the on change event triggers.
I would like a link to select a specific option of a select statement without having to select it first. Just to be clear, I am not trying to have one button/link trigger whichever option has been selected before, I want multiple links trigger one select option each as an alternative to using the drop-down itself.
If we take the following code e.g., how would I trigger the "away" option by this link?
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away">
<img src="http://via.placeholder.com/100x100">
</a>
You should listen for a click on the #away element and change the value of the select field accordingly. Something like this:
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
Here is a working example
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
.wrap > .icon:last-of-type{
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
});
</script>
</head>
<body>
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away" id="away">
<img src="http://via.placeholder.com/100x100">
</a>
</body>
</html>
You can use this handleSelect method on multiple link with proper option value.
function handleSelect(option) {
var optionElm = document.getElementById(option);
if(optionElm) {
optionElm.selected = !optionElm.selected;
}
}
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option id="home" value="home">Home</option>
<option id="away" value="away">Away</option>
</select>
</div>
<a href="#away" onclick=handleSelect("away")>
<img src="http://via.placeholder.com/100x100">
</a>
I used .style.backgroundColor = '#58eaa1' to change the background color of the dropdown list () but it changes the appearance of the dropdown list to 3d. I want the same appearance as in 'initial appearance' even after the change of background color.
Sample code (html)
function changecolor(){
var dropdownlist = document.getElementById('dropdownlist');
dropdownlist.style.backgroundColor = 'green';
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" onchange="changecolor()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
try it , i think this will solve your problem
<select style="background:#58eaa1 !important; border:1px solid #abadb3">
<option>hdd</option>
</select>
Here a working link: http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview
here the html:
// Code goes here
var changeBack = function (){
// select your select tag
var selectStatus = document.getElementById("selectStatus");
// get the number of the option currently selected
var optionSelected = selectStatus.selectedIndex;
// set his background-color to the class'name of the option
selectStatus.style.background = selectStatus.options[optionSelected].className;
//Then color each option in her proper class
for (var option in selectStatus.options){
selectStatus.options[option].style.background = selectStatus.options[option].className;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<!-- Just to color the select on page load -->
<body onload="changeBack()">
<tr>
<td>
<form action="">
<select id="selectStatus" onclick="changeBack()" name="statusApproved">
<!--Set your options a class with the color you want-->
<option class="green" value="Current:Approved">Current: Approved</option>
<option class="red" value="ChangeTo:Rejected">Change to: Rejected</option>
</select>
</form>
</td>
</tr>
</body>
</html>
var buton=document.getElementById("dropdownlist");
var allchar="0123456789ABCDEF";
buton.addEventListener("change",myFun,true);
function myFun(){
var randcol= "";
for(var i=0; i<6; i++){
randcol += allchar[Math.floor(Math.random()*16)];
}
document.getElementById("dropdownlist").style.background="#"+randcol;
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" >
<option class="col_color">0</option>
<option class="col_color">1</option>
<option class="col_color">2</option>
<option class="col_color">3</option>
<option class="col_color">4</option>
<option class="col_color">5</option>
</select>
</div>
</body>
</html>
I want to add a form with javascript and want to use this code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="afbeelding1" class="afbeelding">
<form>
<input type="checkbox" onclick="addOrRemoveSpecifications()">
</form>
<img src="afbeelding1.jpg">
</div>
</body>
<script>
function addOrRemoveSpecifications(){
var div = document.getElementById("afbeelding1").firstchild;
div.innerHTML=div.innerHTML +
'
<form>
<select>
<option value="320x200">320x200
<option value="1024x768">1024x768
<option value="1920x1200">1920x1200
</select>
<select>
<option value="Canvas">Canvas
<option value="Hout">Hout
<option value="Digitaal">Digitaal
</select>
</form>
';
}
</script>
</html>
can anybody help me with this?
thank you in advance, you guys are awesome :)
simply use jquery or equivalent
myform = '<form ...';
$('afbeelding1').append(myform);
There are two ways depending what you want.
First Method
1.Add the form in your HTML itself where you want it.
2.Set the css :display of that form as none.
3.Use the JavaScript function to change the display from none to block.
function addOrRemoveSpecifications() { documentgetElementById("form").style.display="block"; }
Second Method:
Use the following to create your form :-
1.createElement
2.appendChild
.
For Example:http://jsfiddle.net/rvs4oq6p/
I seem to get this null or not an object error over and over when I try to code in javascript. This is an simple example where I'm just trying to make a window pop up that displays the name of the option. How can I avoid getting this error when I'm coding?
The code returns this error in Internet Explorer:
Error: 'document.forms.0.questions' is null or not an object
<!DOCTYPE html>
<!-- HTML5 style -->
<head>
<title>Challenge Question</title>
<script type="text/javascript">
/* <![CDATA[ */
window.alert(document.forms[0].questions.pet.name);
/* ]]> */
</script>
</head>
<body>
<form action="get" >
<select name="questions">
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
</body>
</html>
The element must be added to the DOM first, then you can access it. Now you're trying to access an element that does not yet exist :
<!DOCTYPE html>
<html>
<head>
<title>Challenge Question</title>
</head>
<body>
<form action="get">
<select name="questions">
<!-- Element is added here -->
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
<script type="text/javascript">
/* and can be accessed here, after it's added */
console.log(document.forms[0].questions.options['pet']);
</script>
</body>
</html>
FIDDLE
I have tested the code. It works fine.
<script type="text/javascript">
function func1()
{
var index = document.getElementById("pet").selectedIndex;
var value = document.getElementById("pet").options[index].text;
alert(value);
}
<form action="get">
<select name="questions" id="pet" onchange="if (this.selectedIndex) func1();">
<!-- Element is added here -->
<option value="pet" name="pet" >What is your pet's name?</option>
<option value="pet" name="pet" >What is your pet's 1?</option>
</select>
</form>