使用Javascript修改HTML内容
值得怀疑的是,这需要很多解释,但我想我需要第二双眼睛来检查这一点,因为我只是无法理解为什么它不会!尝试使用“能量计算器”,提交时不会返回任何值,尽管我以与有效的“电池电量计算器”相同的方式处理它。
Doubtful this needs much explaining but I think I need a second set of eyes to check this out because I just cannot fathom why it won't! Try using the "Energy Calculator" and no value will be returned when submitted despite me approaching it in the same way as the "Battery Charge Calculator" which does work.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
为了详细说明 @alex 的答案,您选择了 jsFiddle 的
onLoad
选项,它将您的 JavaScript 代码放置在匿名函数中:尝试一下大小:http://jsfiddle.net/mattball/Cbsa8/。我所做的就是选择
无换行(头)
和无库
。请记住,编写不引人注目的 JavaScript 是更好的编码习惯。在这种情况下,您可以使用
attachEvent 将事件处理程序与 JavaScript 绑定
(对于 IE <9)或addEventListener
(对于真正的浏览器)。编辑回复:OP编辑
打开控制台,在尝试使用能量计算器后问题立即显而易见:
就是这一行:
您访问了错误的表单。您需要将能量计算器代码中的所有
forms['0']
更改为forms[1]
。请注意省略的引号,顺便说一句 -document.forms
是一个数组,而不是一个对象!另外,您显然正在使用 jQuery,但您并没有在任何可以使用的地方使用它。为什么不呢?您的代码还有很大的改进空间。清理时间到了!
HTML
JavaScript
演示:http://jsfiddle.net/mattball/JSpaU/
To elaborate on @alex's answer, you have selected the
onLoad
option of jsFiddle, which places your JavaScript code inside of an anonymous function:Try this on for size: http://jsfiddle.net/mattball/Cbsa8/. All I did was select
no wrap (head)
andNo library
.Keep in mind that it's better coding practice to write unobtrusive JavaScript. In this case you'd bind the event handler with JavaScript, using
attachEvent
(for IE <9) oraddEventListener
(for real browsers).Edit re: OP edits
Open a console and the problem is immediately obvious after trying to use the Energy Calculator:
which is this line:
You're accessing the wrong form. You need to change all cases of
forms['0']
toforms[1]
in the energy calculator's code. Note the omitted quotes, by the way -document.forms
is an array, not an object!Also, you're clearly using jQuery, but you're not using it everywhere you could. Why not? There's a lot of room for improvement in your code. It's cleanup time!
HTML
JavaScript
Demo: http://jsfiddle.net/mattball/JSpaU/
看到左边写着“onLoad”的下拉列表了吗?将其更改为“无包装(头)”即可工作。
See the drop-down list on the left that says "onLoad"? Change it to "no wrap (head)" and it'll work.
这是因为 jsfiddle 的工作方式。您需要像这样声明 energyCalc 函数:
It's because of the way jsfiddle works. You need to declare the energyCalc function like so:
energyCalc()
包装在函数(load
事件的函数)中,并且对全局范围不可见。当它成为全局时它才起作用。
jsFiddle。
energyCalc()
is wrapped in a function (load
event's function), and is not visible to the global scope.It works when it is made global.
jsFiddle.
删除
action = "javascript:energyCalc()"
并添加:
没有 jquery
编辑
还需要返回值(true 或 false)
查看:
http://jsfiddle.net/SabAH/7/http://jsfiddle.net/SabAH/11/更新 解释
:
action
属性告诉浏览器要发布到哪里。该函数需要运行onsubmit
。更新2查看新的jsfiddle
http://jsfiddle.net/426Jj/2/
有一些错误。首先,您的
action="javascript:..."
需要为onsubmit="javascript: return ..."
并删除 energy 方法所需的提交按钮的 onclick引用forms[1]
而不是forms[0]
因为它是第二种形式。主要就是这样。看看: http://jsfiddle.net/426Jj/2/
Remove the
action = "javascript:energyCalc()"
and add:
No jquery
EDIT
Also need return values (true or false)
Check out:
http://jsfiddle.net/SabAH/7/http://jsfiddle.net/SabAH/11/UPDATE an explanation:
The
action
attribute tells the browser where to post to. The function needs to be runonsubmit
.UPDATE2 After looking at the new jsfiddle
http://jsfiddle.net/426Jj/2/
There were a few errors. Firstly your
action="javascript:..."
needs to beonsubmit="javascript: return ..."
and remove the onclick of the submit buttons the energy method needed to referenceforms[1]
notforms[0]
becasue it was the second form. Thats mainly it.look at: http://jsfiddle.net/426Jj/2/