I don't understand why the following isn't changing the select's background color. It's probably something simple, but I can't see it. I'm using Notepad++ editor with Chrome and Opera browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debugging</title>
<style >
select {
background-color: #FF0000;
}
</style>
<script>
function myFunction() {
document.getElementById('slct').style.backgroundColor = #FFFFFF;
}
</script>
</head>
<body>
<select id="slct">
<option>Choose</option>
<option>The First Choice</option>
<option>The Second Choice</option>
</select>
<input type="button" onclick="myFunction()" value="Click Me!">
</body>
</html>
Check your browser's console, you might be getting errors. Background-color value must be in quotes.
document.getElementById('slct').style.backgroundColor = "#FFFFFF";
Related
Hi i have following problem. I want that the user picks an option of a select panel. Then after he clicks the button he is taken to another file where the value of his choice is put in a variable and then displayed. It is important that its opened in a new file. But with my code the variable returns undefined. Here is my Code:
function myFunction() {
a=$("#mySelect").val();
switch(a){
case "Orange":
var b="Orange";
return b;
case "Apple":
var b="Apple";
return b;
case "Pineapple":
var b="Pineapple";
return b;
case "Banana":
var b="Banana";
return "Banana";
}
}
var test=myFunction();
$("button").on("click",blub);
function blub(){
window.open(
"/Users/Adrian/Desktop/jj.html",
'_blank'
);
}
<!DOCTYPE html>
<html>
<body>
<select id="mySelect">
<option value="Apple">
Apple
</option>
<option value="Orange">
Orange
</option>
<option value="Pineapple">
Pineapple
</option>
<option value="Banana">
Banana
</option>
</select>
<p class="bla">
Click the button to select the option element with index "2".
</p>
<p>
<b>
Note:
</b>
The index starts at 0.
</p>
<button>
Try it
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script charset="utf-8" src="j.js">
</script>
<script charset="utf-8" src="jj.js">
</script>
</body>
</html>
$(".bla").html(test);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="bla"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="j.js" charset="utf-8"></script>
<script src="jj.js" charset="utf-8"></script>
</body>
</html>
You should only get the value of the select once the button is clicked, not on page load. Then, you can set it in the sessionStorage so that the other page can access it.
JavaScript for first page:
$("button").on("click", blub);
function blub() {
sessionStorage.setItem("value", $('#mySelect').val());
window.open(
"/Users/Adrian/Desktop/jj.html",
'_blank'
);
}
JavaScript for the second page:
$(".bla").text(sessionStorage.getItem('value'));
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</body>
</html>
I am currently working in jsp. I need to get the value of input on text box while a buttton is clicked. My code is given below. While running it produces output which disappears in seconds. I need a stable output (text in textbox) when button is clicked.
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab{ padding-left: 4em; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").value="ertyu";
}
</script>
</body>
</html>
First of all you have some errors in your code markup. You have just one opened <form> tag inside of <head> tag. Also I noticed that you're trying to set styles for tab but this is not appropriate tag. And you forgot to close </html> tag. Be careful when writing code, better to use code indention for better reading and it could prevent plenty of errors.
regarding your code:
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab {
padding-left: 4em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<form action="/">
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<input type="button" onclick="myFunction()" value="Try it"/>
<p id="demo"></p>
</form>
<script>
function myFunction() {
document.getElementById("myText").value = "ertyu";
}
</script>
</body>
</html>
I've move <form> tag to it desired position. And replaced <button> with <input type="button"> to prevent form submitting. So regarding your code when you press Try it button you will assign "ertyu" text to the input value. And if you want to get value of it, just use document.getElementById("myText").value
I want my dropdown list to return to its first value after page refresh.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<li><label>Type2</label>
<select id="sss">
<option selected id="one1">ONE</option>
<option id="two2">TWO</option>
</select><br></li>
</div>
<script>
document.getElementById('sss').selectedIndex=0
</script>
</body>
</html>
It works in Firefox but not in IE10. Can anybody please help?
Solved it! I had to force the script to run after the page is loaded.
<!DOCTYPE html>
<html>
<head>
<script>
function loaded() {document.getElementById('sss').selectedIndex=0;}
</script>
</head>
<body onload="loaded()">
<div>
<li><label>Type2</label>
<select id="sss">
<option id="one1" SELECTED>ONE</option>
<option id="two2">TWO</option>
</select><br></li>
</div>
</body>
</html>
I've been wrestling with Internet Explorer for a few hours now and can't seem to figure out my problem. I'm trying to achieve a simple "group option switcher" with jQuery show() and hide().
It's probably best if you look at my demo to see what I mean: http://softwaredb.org/test/jquery-multi-select.html
My code works in every browser except IE. My code is this...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo - Jquery Multi Select box</title>
<style type="text/css">
select{width:200px;height:200px;}
select#boysnames, select#girlsnames{display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper" style="padding:50px 0 0 50px;">
<form>
<select multiple="multiple" id="theoptions">
<option value="boysnames">Boys Names</option>
<option value="girlsnames">Girls Names</option>
</select>
<select multiple="multiple" id="placeholder">
</select>
<select multiple="multiple" id="boysnames">
<option>John</option>
<option>David</option>
<option>Tom</option>
</select>
<select multiple="multiple" id="girlsnames">
<option>Jenny</option>
<option>Amanda</option>
<option>Sara</option>
</select>
</form>
</div> <!-- end #wrapper -->
<script type="text/javascript">
$('option[value="boysnames"]').click(function() {
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
});
$('option[value="girlsnames"]').click(function() {
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
});
</script>
</body>
</html>
My logic is... on click, hide all other select tags and show the one I'd like to see. It seems to work fine, until I try in IE. Any ideas what I'm doing wrong? I'm very new to jquery (and javascript/programming in general) so forgive me if this is a dumb question.
Instead of tracking clicks on the option level, track a change on the select level.
$('select#theoptions').change(function() {
$('#placeholder, #girlsnames').hide();
if($(this).val() == 'boysnames') {
$('#boysnames').show();
} else {
$('#girlsnames').show();
}
});
There are many ways to make your approach a little more intuitive, but this should get you going on the path that you're on
<script type="text/javascript">
$('#theoptions').click(function() {
if($(this).attr('value') == "boysnames")
{
$('select#placeholder, select#girlsnames').hide();
$('select#boysnames').show();
}
if($(this).attr('value') == "girlsnames")
{
$('select#placeholder, select#boysnames').hide();
$('select#girlsnames').show();
}
});
</script>
use this ..