Can anyone please tell me why this jsFiddle doesn't work?
The idea is simple is just suppose to input the selected text into the textbox..
HTML:
<input type="text" id="teste" maxlength="50">
<select>
<option onClick="nelson">nelson</option>
</select>
JavaScript:
function nelson(){
document.getElementById('teste').value =+ "nelson";
}
Thanks in advance
Can anyone please tell me why this jsFiddle doesn't work?
The idea is simple is just suppose to input the selected text into the textbox..
HTML:
<input type="text" id="teste" maxlength="50">
<select>
<option onClick="nelson">nelson</option>
</select>
JavaScript:
function nelson(){
document.getElementById('teste').value =+ "nelson";
}
Thanks in advance
Share Improve this question edited Aug 9, 2013 at 9:23 abc123 18.9k7 gold badges55 silver badges84 bronze badges asked Aug 9, 2013 at 9:17 AlphaAlpha 1211 gold badge3 silver badges10 bronze badges 2-
the
onclick
is not really javascript, I'd call it html (because it is a html-attribute), therefor not case sensative – Martijn Commented Aug 9, 2013 at 9:26 - 1 Actually, there is no event be fired on selected item. Pre-condition: click on item of select, an alert will be fired. Step 1: choose an item in list -> show alert Step 2: choose that item again, and there is no event fired. This is the behavior of browser. – Phong Vo Commented Aug 9, 2013 at 9:29
6 Answers
Reset to default 8DEMO: jsFiddle
HTML:
<input type="text" id="teste" maxlength="50" />
<select onchange="selectedItemChange(this)">
<option value="nelson">nelson</option>
<option value="justin">justin</option>
</select>
JS:
function selectedItemChange(sel) {
document.getElementById('teste').value = sel.value;
}
Explanation:
<option onClick="nelson">nelson</option>
was changed for three reasons:
onclick
is preferred toonClick
for consistencynelson
needed to be changed tonelson()
to actually call the function.- Since we are dealing with a
select
html element it is better to use theonchange
event on the root.
document.getElementById('teste').value =+ "nelson";
- As many others have pointed out the proper operator is
+=
or=
To set initial value do the following
DEMO: jsFiddle
HTML
<input type="text" id="teste" maxlength="50" />
<select id="select-people" onchange="selectedItemChange(this)">
<option value="nelson">nelson</option>
<option value="justin">justin</option>
</select>
JS
function selectedItemChange(sel) {
document.getElementById('teste').value = sel.value;
}
window.onload=function(){
document.getElementById('teste').value = document.getElementById("select-people").value;
}
There's no operator =+
, +=
is what You need.
First of all the right operator is +=
not =+
.
The reason why this is not working is because your function has to be called :)
Just let the closure be run instantly:
(function nelson(){
document.getElementById('teste').value += "nelson";
})();
or without any function
:
document.getElementById('teste').value += "nelson";
or call it anywhere:
nelson();
You id mistake, change =+
to +=
.
Try use remender event for select
. It is change
.
<input type="text" id="teste" maxlength="50">
<select onchange="nelson(this.value);">
<option>nelson</option>
</select>
And JS
function nelson(value){
document.getElementById('teste').value += value;
}
This is your full working solution, it will work with your code
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<input type="text" id="teste" value="" />
<select onchange="nelson()" id="sel_nel">
<option value="">select</option>
<option value="nelson">nelson</option>
</select>
<script>
function nelson(){
document.getElementById('teste').value = document.getElementById('sel_nel').value;
}
</script>
</body>
</html>
Have a look at this fiddle: I assume you want to change the text-input's value depending on a selection made within the select
-tag.
--> http://jsfiddle/mQyLG/2/
Update (Explanation):
- I set the value of
select
directly. If you really meant+=
, you can change it toinput.value = select.value
. - I used the
onchange
event ofselect
instead of aonclick
event for every singleoption
. Like this you save a lot of code ;) - I call the method once at start to ensure there's a initial value.
- I changed the function's scope to match
window
. This is not the best idea and should be fit to your actual scope.