最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - inputing text in textbox - Stack Overflow

programmeradmin2浏览0评论

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
Add a ment  | 

6 Answers 6

Reset to default 8

DEMO: 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:

    1. onclick is preferred to onClick for consistency
    2. nelson needed to be changed to nelson() to actually call the function.
    3. Since we are dealing with a select html element it is better to use the onchange 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):

  1. I set the value of select directly. If you really meant +=, you can change it to input.value = select.value.
  2. I used the onchange event of select instead of a onclick event for every single option. Like this you save a lot of code ;)
  3. I call the method once at start to ensure there's a initial value.
  4. I changed the function's scope to match window. This is not the best idea and should be fit to your actual scope.
发布评论

评论列表(0)

  1. 暂无评论