In Chrome browser, when you click on CloudCover on this web page, a description is revealed below. In IE the description is not revealed. Any suggestions to make this work in IE?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>min test</title>
<script type='text/javascript'>
function showDescription (sel) {
var myVarDescip, myVarTEXT;
var myVar = (sel.value);
document.getElementById('putDescriptionHere').innerHTML = "";
myVarDescip = (myVar + "Descrip");
myVarTEXT = document.getElementById(myVarDescip).innerHTML;
document.getElementById('putDescriptionHere').innerHTML = myVarTEXT;
}
</script>
</head>
<body>
<select id="destSelect" size="3" multiple="multiple">
<option value="CloudCover" onclick="showDescription(this);">Cloud Cover</option>
</select>
<div id="CloudCoverDescrip" style="display: none">
<b>Cloud Cover:</b> The percentage of sky occluded by clouds.
</div>
<div id="putDescriptionHere"></div>
</body>
</html>
You can't attach mouse events on options in IE, so the click never fires.
Use the onchange event on the select instead
<select id="destSelect" size="3" multiple="multiple" onchange="showDescription(this);">
FIDDLE
Related
I need to dynamically add and remove HTML elements to my product form (attribute addition purpose) and was searching stack overflow.
I found this solution to be very close (except it does not has a remove option plus I sincerely do not know how to retrieve the data of each textbox, but all this later).
https://jsfiddle.net/nzYAW/
The code in the fiddle works fine. But as I tried it on my local machine it fails to produce any result.
Here is what I did
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.extraPersonTemplate {display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
})
function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name = "firstname" + len;
$html.find('[name=lastname]')[0].name = "lastname" + len;
$html.find('[name=gender]')[0].name = "gender" + len;
return $html.html();
}
</script>
</head>
<body>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname">
<input class="span3" placeholder="Last Name" type="text" name="lastname">
<select class="span2" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
<i class="icon-plus-sign icon-white"></i> Add another family member</p>
</body>
</html>
and this is the result
Where did I go wrong at copy paste?
You need to load jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to include jQuery. If you check your javascript console (which you definetly should) you will probably find this error:
$ is not defined
That is because jQuery wasn't loaded before you try to use it. Add this to your page before your javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can see in the JSFiddle that you include these libraries, but you don't include them when you just copy paste this.
Include these javascripts
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Move the JavaScript to be right above the </body> tag.
I think if you're trying to access elements before the page has loaded them, then it won't work.
Also as other answers have pointed out, be sure you've included jQuery in the <head></head> section of your page.
I'm trying to create a range of numbers in a dropdown form using JavaScript.
However, it looks like
…and it does not show any options and clicking on the arrow does not pop up more options. I already checked that my path is correct.
I tried it in JSFiddle and it works but not when I put it in my HTML.
I'm going crazy on why this is not working.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
<script type="text/javascript" src="../assets/main.js"></script>
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length">
</select>
</div>
</body>
</html>
main.js
var select = document.getElementById('length');
for (var i = 0; i<= 24; i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
select.options.add(option);
}
The problem is that when main.js script is parsed and executed, there is no element with id length yet in DOM. The simplest solution is to move your script to the very end of body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length"></select>
</div>
<script type="text/javascript" src="../assets/main.js"></script>
</body>
</html>
The reason why it works in jsFiddle, is because it's configured so that script section is executed on window.onload event (in the right side-panel, dropdown "onLoad"). Of course, you could do the same, e.g. in main.js:
window.onload = function() { /* previous main.js code */};
In this case you would not need to move script anywhere.
I have written the below mentioned javascript and have called on the button click event but somehow it doesn't work, please someone help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function f1()
{
var x=document.getElementById("txt1").innerHTML
if(x==1)
{
alert("hello");
}
}
</script>
<body>
<form id="form1">
<input type="text" id="txt1"/><br/>
<input type="button" id="btn1" value="submit" onclick="f1()"/>
</form>
</body>
</html>
You're trying to grab innerHTML from an input field when you should be grabbing the value otherwise it'll always be undefined:
Change:
var x = document.getElementById("txt1").innerHTML;
to:
var x = document.getElementById("txt1").value;
JSFiddle Example
http://jsfiddle.net/moogs/dNWNP/1/
It should not be .innerHTML, but .value.
You should use value instead of innerHTML:
var x=document.getElementById("txt1").value;
See the jsfiddle.
I have the following JavaScript code:
/* Only numbers input in the CELL text box */
function ValidateKeyNumber()
{
var key=window.event.keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
This JS working fine in IE & Chrome but not in FF. Can you please tell me what is wrong with this? I need the JS to work in these 3 major browsers.
FYI:
I use the latest FF version.
JavaScript is enabled in FF.
I don't use jQuery
Any help will be appreciated.
UPDATE:
FULL PAGE CODE:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaSCript Input Test</title>
<script>
/* Only numbers in mobile text-box */
function ValidateKeyNumber()
{
var key=window.event.keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
</script>
</head>
<body>
<form>
<label>Cell Number:</label><input type="text" name="cell" size="30" maxlength="10" onKeyPress="return ValidateKeyNumber()"/>
</form>
</body>
</html>
The problem is that window.event isn't defined in Firefox. The solution is to use the argument passed to the event handler, for example
<label>Cell Number:</label><input type="text" name="cell" size="30" maxlength="10" onKeyPress="return ValidateKeyNumber(event)"/>
function ValidateKeyNumber(event) {
var key=(event||window.event).keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`