使用 Javascript 修改 HTML 内容

Posted 2023-05-07

【中文标题】使用 Javascript 修改 HTML 内容

【英文标题】：Using Javascript to modify HTML content

【发布时间】：2011-08-23 18:42:54

【问题描述】：

怀疑这需要很多解释，但我认为我需要第二双眼睛来检查这一点，因为我无法理解为什么它不会！尝试使用“能量计算器”，尽管我以与“电池电量计算器”相同的方式接近它，但提交时不会返回任何值。

链接： http://jsfiddle.net/Deva/426Jj/

【问题讨论】：

如果你在页面的其他部分使用jQuery，你不能在这部分也使用jQuery吗？

【参考方案1】：

为了详细说明 @alex 的答案，您选择了 jsFiddle 的 onLoad 选项，它将您的 javascript 代码放在匿名函数中：

window.onload = function() 
    function energyCalc() 
        var mass = document.forms['0'].mass.value;
        var finalMass = mass * 1000;
        var velocity = document.forms['0'].velocity.value;
        var finalVelocity = velocity * 0.3048;
        var energy = (0.5 * (finalMass * (finalVelocity * finalVelocity)));
        if ((mass && velocity) != '') 
            document.getElementById("energy").innerhtml = 'Energy of weapon: ' + energy + ' Joules';
         else 
            document.getElementById("energy").innerHTML = 'You must enter values in both fields!';
        
    

试试这个尺寸：http://jsfiddle.net/mattball/Cbsa8/。我所做的只是选择no wrap (head) 和No library。

请记住，编写unobtrusive JavaScript 是更好的编码习惯。在这种情况下，您可以使用 attachEvent（对于 IE addEventListener（对于真实浏览器）将事件处理程序与 JavaScript 绑定。​​

---

编辑回复：OP 编辑​​

打开控制台，在尝试使用能量计算器后问题立即显而易见：

> Uncaught TypeError: Cannot read property 'value' of undefined (fiddle.jshell.net:100)

这是这一行：

var mass = document.forms['0'].mass.value;

您访问了错误的表单。您需要在能量计算器的代码中将所有forms['0'] 的大小写更改为forms[1]。注意省略的引号，顺便说一句 - document.forms 是一个数组，而不是一个对象！

另外，您显然在使用 jQuery，但您并没有在任何可能的地方都使用它。为什么不？您的代码有很大的改进空间。清理时间到了！

HTML

<div id="main">
    <a href="#"><h3>Battery Charge Calculator</h3></a>
    <div class="slide">
        <form id="batteryForm" action="">
            <p>
                Battery Capacity (mah):
            </p>
            <p>
                <input name="capacity"/>
            </p>
            <p>
                Charge Rate (mA):
            </p>
            <p>
                <input name="rate"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="time"/>
        </form>
    </div>
    <a href="#"><h3>Energy Calculator</h3></a>
    <div class="slide">
        <form id="energyForm" action="">
            <p>
                Mass of BB (grammes):
            </p>
            <p>
                <input name="mass"/>
            </p>
            <p>
                Power of weapon (FPS):
            </p>
            <p>
                <input name="velocity"/>
            </p>
            <p>
                <input type="submit" value="Submit"/>
            </p>
            <br/>
            <p id="energy"/>
        </form>
    </div>
</div>

JavaScript

$(function() 
    $('#main > a > h3').click(function() 
        $(this).closest('a').next('div.slide').animate(
            height: 'toggle'
        , 750);
    );

    function batteryCalc() 
        var capacity = this.capacity.value,
            rate = this.rate.value,
            time = capacity / (rate / 1.2),
            chargeTime = (Math.round(10 * time) / 10).toFixed(1),
            message = 'You must enter values in both fields!';

        if (capacity && rate) 
            message = 'Required time on charge: ' + chargeTime + ' hours';
        

        $('#time').html(message);
        return false;
    

    function energyCalc() 
        var mass = this.mass.value,
            finalMass = mass * 1000,
            velocity = this.velocity.value,
            finalVelocity = velocity * 0.3048,
            energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))).toFixed(1),
            message = 'You must enter values in both fields!';

        if (mass && velocity) 
            message = 'Energy of weapon: ' + energy + ' Joules';
        

        $('#energy').html(message);
        return false;
    


    $('#batteryForm').submit(batteryCalc);
    $('#energyForm').submit(energyCalc);
);

演示：http://jsfiddle.net/mattball/JSpaU/

【讨论】：

太棒了！感谢您花时间这样做。第一次尝试任何 jQuery，这样就可以解释代码的混乱。将尝试审查这一切并理解。谢谢。

没问题，不客气。将来，如果您有正确的（工作）代码并且您认为可以改进，您可以将其发布到codereview.se。

【参考方案2】：

看到左侧显示“onLoad”的下拉列表了吗？把它改成“no wrap (head)”就可以了。

【讨论】：

这是非常正确的——并不是说这真的是我的问题。问题也存在于 jsFiddle 之外。

究竟是什么问题？计算不正确吗？

@matt 那么你应该真的在提问时更加具体。

抱歉，我只是想尝试将其他一切排除在外。完整代码见：jsfiddle.net/Deva/426Jj。如果在 jsFiddle 中修改某些内容是解决方法，这对我没有帮助，因为我正试图将它作为自己的 HTML 页面运行。非常感谢。

【参考方案3】：

这是因为 jsfiddle 的工作方式。您需要像这样声明 energyCalc 函数：

window.energyCalc = function()  ... 

【参考方案4】：

energyCalc() 包装在一个函数中（load 事件的函数），对全局范围不可见。

它在全局化时起作用。

jsFiddle.

【参考方案5】：

删除action = "javascript:energyCalc()"

并添加：

jQuery(document).ready(function()

    jQuery(document.forms[0]).submit(energyCalc);
);

没有 jquery

<form method="post" onsubmit="energyCalc();" >

编辑

还需要返回值（真或假）

查看：http://jsfiddle.net/SabAH/7/http://jsfiddle.net/SabAH/11/

UPDATE解释：

action 属性告诉浏览器发帖到哪里。函数需要运行onsubmit。

UPDATE2看了新的jsfiddle之后

http://jsfiddle.net/426Jj/2/

有一些错误。首先，您的action="javascript:..." 需要为onsubmit="javascript: return ..." 并删除提交按钮的onclick 需要引用forms[1] 而不是forms[0] 的能量方法，因为它是第二种形式。主要是这样。

看：http://jsfiddle.net/426Jj/2/

【讨论】：

jQuery 和这个有什么关系？

这是一个很好的观点。一种习惯。！但是没有它也很容易实现。

@wesley 现在没有 jQuery。这样更好吗？