使用JavaScript更改输入值-出了什么问题？
[英]Changing input value with javascript - what went wrong?
问题描述
I have a text with an input field. 
我有一个带有输入字段的文本。 I want the field to start as blank, and when clicked upon, set the input's text to its correct value (saved in the "name" field, for instance). 我希望该字段以空白开头，并在单击时将输入的文本设置为其正确的值（例如，保存在“名称”字段中）。
If I do it this way, it works fine: 如果我这样做，它会正常工作：
Buy <input type="text" name="eggs" onclick="this.value=this.name;"> tomorrow.
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working: 但是，如果我尝试清除DOM并将函数移到单独的javascript文件，它将停止工作：
HTML: HTML：
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
JS: JS：
function showname(el) {
el.value = el.name;
}
function showname(el){ el.value = el.name; }
.closeform{ width: 70px; } .closeform input { width: 70px; } .closeform button { width: 70px; }
Buy <span class="closeform"> <input type="text" name="eggs" onclick="showname(this);"> </span> tomorrow.
I'm very new to Javascript - what am I missing here? 我是Java语言的新手-我在这里想念什么？
2 个解决方案
解决方案1
1 2015-04-29 22:57:19
Everything in JavaScript has a scope . JavaScript中的所有内容都有作用域 。 Where you are defining your function, it is not visible to the input so the input doesn't know that function even exists. 在定义函数的地方， input不可见，因此输入甚至不知道该函数存在。 You can use window to make the function visible to it: 您可以使用window使该功能可见：
<input type="text" name="eggs" onclick="window.showname(this);"/>
window.showname = function (el)
Fiddle 小提琴
I don't recommend global functions though. 我不建议使用全局函数。 So then what else? 那还有什么呢？
You can use the
onclick function in JavaScript.
您可以在JavaScript中使用onclick函数。
To find elements in JavaScript, you use selectors .
要在JavaScript中查找元素，请使用选择器 。
I'm using getElementById() this will get an element by it's id.
我正在使用getElementById()它将通过其ID获得一个元素。
A list of selectors are here
选择器列表在这里
<input id="my_input" type="text" name="eggs"/>
Then in JavaScript: 然后在JavaScript中：
window.onload = function () {
//Your code
};
Fiddle 小提琴
When doing this. 这样做时。 Make sure all your code is wrapped in a window.onload . 确保所有代码都包装在window.onload 。 This will make sure the code is run at the right time: 这将确保代码在正确的时间运行：
window.onload = function () { //Your code };
JSFiddle automatically puts your code in this. JSFiddle自动将您的代码放入其中。
解决方案2
1 已采纳 2015-04-30 07:00:26
You say in your question: 您在问题中说：
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working
Let's say you have 2 actual files in the same folder: 假设您在同一文件夹中有2个实际文件：
myscript.jscontents:myscript.js内容：function showname(el) { el.value = el.name; }index.htmlcontents:index.html内容：<!DOCTYPE html> <html><head><title>Demo</title> <script src="myscript.js"></script> </head><body> Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow. </body></html>OR
要么 <!DOCTYPE html> <html><head><title>Demo</title> </head><body> Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow. <script src="myscript.js"></script> </body></html>
That should work perfectly... 那应该工作得很好...
However, in the comments you say: 但是，您在评论中说：
I tried it with Fiddle - maybe the problem is in Fiddle interface.
That is where your problem was.... 那就是你的问题所在。
There is no separate javascript-file in jsfiddle. jsfiddle中没有单独的javascript文件。
The three code-blocks (html, js, css) get merged into one file. 这三个代码块（html，js，css）合并到一个文件中。
Right-click the result-window in jsfiddle and look at the generated file . 右键单击jsfiddle中的结果窗口，然后查看生成的文件 。
Then notice the options (top right corner) from jsfiddle: by default the code is wrapped in an onload-method (suiting to the library you selected or window.onload if you are not using a library). 然后注意jsfiddle中的选项 （右上角）： 默认情况下 ，代码包装在onload方法中（适合您选择的库，如果不使用库，则适合window.onload）。
You can however place the script in the head or body, thereby not wrapping your code inside a function's scope (which then closes over the containing identifiers). 但是你可以把在头部或身体的脚本，从而不换函数的范围内你的代码（然后关闭在含标识符）。
See http://jsfiddle.net/wf55a5qb/ for a working example. 有关工作示例，请参见http://jsfiddle.net/wf55a5qb/ 。
The reason your example stack-snippet worked here on StackOverflow is that it's snippet-editor does not wrap the javascript codeblock in a (onload-like) function (when it combines the three code-blocks). 您的示例堆栈片段在此处在StackOverflow上起作用的原因是，它的片段编辑器未将javascript代码块包装在（类似于加载）函数中（当它结合了三个代码块时）。
Having said and explained this, I do encourage you to set your events (Using obj.addEventListener / obj.attachEvent or the direct elm.onevent ) from the/a script once the elements (that your script manipulates, place script as last element of the html-body) or page (using window.onload/etc) has loaded. 说完并解释了这一点，我鼓励您从/ a脚本obj.attachEvent事件（使用脚本操作后，将脚本放置为以下内容的最后一个元素）中设置事件（使用obj.addEventListener / obj.attachEvent或直接elm.onevent ）。 html-body）或页面（使用window.onload / etc）已加载。
I posted this to clear up what actually went wrong so you don't make false models in your head about how javascript works (like "an external script runs in it's own scope" which no-one claimed but might be an assumption you might make ) whilst still learning it! 我发布此消息是为了弄清实际上出了什么问题，这样您就不会在脑海中就javascript的工作方式建立错误的模型（例如“一个外部脚本在其自己的范围内运行” ，没有人声称，但可能是您可能会做的一个假设） ），同时仍在学习！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.