我有一个带有输入字段的文本。我希望该字段以空白开始，并在单击时将输入的文本设置为正确的值(例如，保存在“名称”字段中)。
如果我这样做，效果很好:
Buy <input type="text" name="eggs" onclick="this.value=this.name;"> tomorrow.
但是，如果我尝试清理 DOM 并将函数移动到单独的 javascript 文件，它就会停止工作:
HTML:
Buy <input type="text" name="eggs" onclick="showname(this);"> tomorrow.
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.我是 Javascript 的新手 - 我在这里错过了什么？
最佳答案
你在问题中说:
However, if I try to clean the DOM and move the function to a separate javascript file, it stops working
假设您在同一个文件夹中有 2 个实际文件:
myscript.js内容:function showname(el) { el.value = el.name; }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>或
<!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>
那应该完美地工作......
但是，在评论中你说:
I tried it with Fiddle - maybe the problem is in Fiddle interface.
那是你的问题所在......
jsfiddle 中没有单独的 javascript 文件。
三个代码块(html、js、css)合并到一个文件中。
右键单击 jsfiddle 中的结果窗口，查看生成的文件。
然后注意 jsfiddle 中的选项(右上角):默认代码被包裹在一个 onload 方法中(适用于您选择的库或 window.onload，如果您没有使用图书馆)。
然而，您可以将脚本放在头部或主体中，从而不将您的代码包装在函数的范围内(然后 closes 在包含的标识符上)。
参见 http://jsfiddle.net/wf55a5qb/一个工作示例。
您的示例 stack-snippet 在 StackOverflow 上工作的原因是它的代码片段编辑器没有将 javascript 代码块包装在一个(类似 onload 的)函数中(当它结合了三个代码块)。
说完并解释了这一点后，我确实鼓励您在元素(您的脚本操作，将脚本作为 html-body 的最后一个元素)或页面(使用 window.onload/etc)已加载。
我发布这篇文章是为了澄清实际上出了什么问题，这样你就不会在脑海中对 javascript 的工作方式做出错误的模型(比如“一个外部脚本在它自己的范围内运行”没有人声称，但可能是您在学习的同时做出的假设)!
关于javascript - 使用 javascript 更改输入值 - 出了什么问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29955986/