gpt4 book ai didi

javascript - 使用 javascript 更改输入值 - 出了什么问题?

转载 作者:行者123 更新时间:2023-11-30 16:54:28 25 4
gpt4 key购买 nike

我有一个带有输入字段的文本。我希望该字段以空白开始,并在单击时将输入的文本设置为正确的值(例如,保存在“名称”字段中)。

如果我这样做,效果很好:

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com