Below Code:
<!DOCTYPE html>
<html>
<body>
<select name="cars" id="demo1">
<option value="Volvo">Volvo</option>
<option value="Car">Car</option>
</select>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var compare = 'Volvo';
var e = document.getElementById("demo1");
var val = e.options[e.selectedIndex].value;
if (val == compare) {
alert(val);
}
}
</script>
</body>
</html>
In the above, if I select 'Volvo' from the list and click on "Try it" button it should compare the selected value(here the value is "Volvo") with "Volvo" in javascript and alert the selected value but the "IF" condition in javascript always fails.
Can anyone spot the bug in the code?
Thanks,
ADI
Just insert a closed curly bracket at the end of myFunction
function myFunction() {
var compare = 'Volvo';
var e = document.getElementById("demo1");
var val = e.options[e.selectedIndex].value;
if (val == compare) {
alert(val);
}
}
Related
I created this code in javascript, this code work fine, the code use drop-down to select item.
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</head>
<body><br><div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
document.getElementById("id6").innerHTML = "You selected: " + link_1;
}
</script>
</body>
</html>
Now i need to call variable link_1 out of function, allow me to use this variable with another function or any where out the function.
i try to use this code
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</head>
<body><br><div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
return link_1;
}
document.getElementById("id6").innerHTML = "You selected: " + link_1;
</script>
</body>
</html>
but this code not correct, link_1 is undefined, so how i use link_1 out of function.
The basics to get it done :
var link_1 = 'foobar';
function ....() { something with link_1; }
console.log(link_1);
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="id6"></div>
Select an item from the following list:<br />
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1">car1
<option value="var_2">car2
<option value="var_3">car3
<option value="var_4">car4
</select>
<script>
function myFuntam() {
var x = document.getElementById("select").value;
url="http//domain1.com";
ur2="http//domain2.com";
ur3="http//domain3.com";
ur4="http//domain4.com";
var link_1;
if (x == "var_1") {
link_1=url;
}
if (x == "var_2") {
link_1=ur2;
}
if (x == "var_3") {
link_1=ur3;
}
if (x == "var_4") {
link_1=ur4;
}
return link_1;
}
function secondfunction(){
var linkvalue=myFuntam();
alert(linkvalue);
}
document.getElementById("id6").innerHTML = "You selected: " + myFuntam();
</script>
</body>
</html>
An alternative to using a variable, is to store the information in the DOM. You will save some code logic by storing those URL strings in each of the option nodes, as HTML5 data attributes.
The selected URL is then quite easily available.
var sel = document.getElementById('select');
function myFuntam() {
console.log(sel.options[sel.selectedIndex].dataset.url);
return sel.options[sel.selectedIndex].dataset.url;
}
Select an item from the following list:<br>
<select id="select" onchange="myFuntam()">
<option value="">choose
<option value="var_1" data-url="http//domain1.com">car1</option>
<option value="var_2" data-url="http//domain2.com">car2</option>
<option value="var_3" data-url="http//domain3.com">car3</option>
<option value="var_4" data-url="http//domain4.com">car4</option>
</select>
You can of course still decide to store that URL in a global variable, but as you can see, you don't need a lot of logic any more to retrieve it dynamically. Calling the function will just give you the URL you need without much hassle.
You have to declare the var outside the function so the function changes its declared value and you can keep using it the way you wanted after your function is done.
var link_1;
function myFunction() {
link_1 = 'www.anysite.com';
}
myFunction();
//now the var can be used outside
console.log(link_1);
//Anothe option could be
var link;
function myFunction2() {
link = 'www.otherwebsite.com';
return link;
}
link_2 = myFunction2();
console.log(link_2);
The third option could be using localStorage if the other ones did not work.
localStorage.setItem('link_1', link_1_value);
var aLink = localStorage.getItem('link_1');
Choose the one that suits your needs.
function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').selectedIndex = UTCTimeZone;
}
how can we set textbox value to dropdownlist using dropdownlist id
I guess it would look like this:
function SetTxt() {
var indx = document.getElementById('ddlUTCTimeZone').selectedIndex;
var val = document.getElementById('ddlUTCTimeZone').options[indx].text;
document.getElementById("txtPortorAnchorDeparture").value = val;
}
Just replace .selectedIndex by .value it will be done
Try this
function SetUtcTimeZone() {
var UTCTimeZone = document.getElementById("txtPortorAnchorDeparture").value;
document.getElementById('ddlUTCTimeZone').value = UTCTimeZone;
}
<!-- Simple example -->
<select id="ddlUTCTimeZone">
<option value="1">USA</option>
<option value="2">Egypt</option>
<option value="0">GMT</option>
</select>
<input id="txtPortorAnchorDeparture" type="text" />
<button type="button" onclick="SetUtcTimeZone()">Go</button>
Here is a simple function
function dropdownToTextbox(dropdown, textbox) {
var selectedOption = dropdown.options[dropdown.selectedIndex];
textbox.value = selectedOption.value;
}
I'm trying to get an dropdown menu to call javascript functions. The option value seems to default to calling a web page, but I need it run the javascript instead. The javascript I'm using works great when using an onclick fucntion. How can I modify it so it works for my dropdown menu?
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body>
<form>
<p><b>Select a Staff Position </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
<option value="myFunction1()">Illustrators</option>
<option value="myFunction2()">Tech Writers</option>
</p>
</select>
</form>
<script>
var iframeExists = false;
function myFunction1() {
var x
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
document.body.appendChild(x);
}
function myFunction2() {
var x;
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>
<br>
</body>
</html>
DRY code makes your life much simpler.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
</head>
<body>
<form>
<p><b>Select a Staff Position </b>
<select id="mySelect" onchange="select_change()">
<option value="">Select one</option>
<option value="Illustrators">Illustrators</option>
<option value="TechWriters">Tech Writers</option>
</select>
</p>
</form>
<script>
var iframeExists = false;
function select_change() {
var my_select = document.getElementById("mySelect");
var my_select_value = my_select.options[my_select.selectedIndex].value;
var x;
if (!iframeExists) {
x = document.createElement("IFRAME");
iframeExists = true;
} else {
x = document.getElementsByTagName("IFRAME")[0];
}
if(my_select_value) {
x.setAttribute("src", "http://www.oldgamer60.com/Project/" +
my_select_value + ".php");
document.body.appendChild(x);
}
}
</script>
</body>
</html>
Not sure this is the best way to do it but it should provide a solution.
It's possible to store your functions in an object and then call them from a string using the following syntax:
object['nameOfFunction']();
So if we setup the script like so:
function callFunction(){
console.log('change');
var e = document.getElementById('select');
var value = e.options[e.selectedIndex].value;
if (value !== "") {
functions[value]();
}
}
var functions = {
myFunction1: function(){
/*function1 code*/
},
myFunction2: function(){
/*function2 code*/
}
};
So we've got an object 'functions' which has two members called 'myFunction1' and 'myFunction2'. We then have another function which pulls the value from the select and runs the selected function.
And your html like this:
<form>
<p><b>Select a Staff Position </b>
<select id="select" onchange="callFunction()">
<option value="">Select one</option>
<option value="myFunction1">Illustrators</option>
<option value="myFunction2">Tech Writers</option>
</select></p>
</form>
In the html we change the onchange to call our function selector and remove the brackets from the 'myFunction' values.
NOTE: You need to lay out your code so that the script is above the form, maybe in the header, otherwise the 'onchange=' can't access the 'callFunction' due to it not being defined.
EDIT: Take a look at the code here to see it in action: http://plnkr.co/edit/?p=preview
Your HTML mark-up is incorrect. Your </p> is misplaced.
Use this:
<form>
<p><b>Select a Staff Position </b>
<select onchange="window.open(this.value,'','');">
<option value="">Select one</option>
<option value="myFunction1()">Illustrators</option>
<option value="myFunction2()">Tech Writers</option>
</select>
</p>
</form>
Working demo (let it allow popups): https://jsbin.com/xesiyavilu/edit?html,js,output
Update 1:
The issue is that when you do <option value="myFunction1()">Illustrators</option> then myFunction1() is passed as a string.
Change your markup to:
<select onchange="popup(this.value)">
<option value="">Select one</option>
<option value="1">Illustrators</option>
<option value="2">Tech Writers</option>
</select>
in your Javascript, change myFunction1() and myFunction2() to have it return some value, then add this function:
function popup(val){
console.log('val: ' + val);
if(val === '1'){
// call myFunction1() and get something in return;
} else {
// call myFunction2() and get something in return;
}
window.open(returnedValue,'','');
}
My index.html:
<body>
<select id="car">
<option value="TOYOTA">TOYOTA</option>
<option value="BMW">BMW</option>
</select>
<input type=button id="get_btn" value="Get"></input>
<script src="myscript.js"></script>
</body>
myscript.js:
var btn=$('#get_btn');
btn.click(function(){
var car= $('#car').val;
alert(car);
});
When I press the get button, I expect an alert show the selected car, but I got an alert window with the jQuery val function code:
function (value) {
if (!arguments.length) {
var elem = this[0];
if (elem) {
....
Where goes wrong?
".val" is a function. Use:
var car= $('#car').val();
val is a function, not a variable. You need to amend your myscript.js code as follows:
var btn=$('#get_btn');
btn.click(function(){
var car = $('#car').val();
alert(car);
});
you have missing brackets :
var car= $('#car').val;
and should be :
var car= $('#car').val();
Ok here's the deal, I'm trying to have a switch statement redirect to another page depending on what option is selected in a select box. Below is a sample i'm working with and trying to figure out, any help at all would be greatly apreciated.
<html>
<body>
<form name="form1">
<select name="select1">
<option value="p1">p1</option>
<option value="p2">p2</optino>
</select>
</form>
<script type="text/javascript">
<!--
var sel = document.form1.select1;
var txt = sel.options[sel.selectedIndex].text;
var opt = sel.options[sel.selectedIndex].value;
switch (sel)
{
case 'p1': window.location = 'http://www.yahoo.com'
break;
case 'p2': window.location = 'http://www.google..com'
break;
}
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
I recommend you avoid switch-statements. How about this?
<select name="select1">
<option data-url="http://www.yahoo.com" value="p1">p1</option>
<option data-url="http://www.google.com" value="p2">p2</option>
</select>
And:
document.getElementById("select1").onchange = function () {
var url = this.options[this.selectedIndex].getAttribute("data-url");
window.location = url;
};
Edit: I changed the example to use html 5 data attributes (not to worry, they are 100% supported in all browsers), since you need the value attribute for something else.
You need to bind an event handler
Your switch was using the wrong value
See http://www.jsfiddle.net/vDFpZ/
<html>
<body>
<form name="form1">
<select name="select1">
<option value="p1">p1</option>
<option value="p2">p2</option>
</select>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementsByName("select1")[0].onchange = function () {
var sel = this.options[this.selectedIndex];
var text = sel.text;
var val = sel.value;
switch (val)
{
case 'p1': window.location = 'http://www.yahoo.com'
break;
case 'p2': window.location = 'http://www.google..com'
break;
}
}
}
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
i noticed that you did not bind an change handler to the select, so when the user selects a value nothing happens.
You've got some typos, your second "/option" and your "google.com".
And the switch statement has nothing to do with your error.
You have no event listener/onchange handler and you aren't switching with the value from the select option
https://developer.mozilla.org/en/DOM/element.onchange
https://developer.mozilla.org/en/DOM/element.addEventListener