Question

我在JSFiddle为学校做了一个小项目，将代码转移到Dreamweaver并且它不再起作用。这是我在JSFiddle中的代码，在HTML部分下，因为它是唯一可以工作的地方。

<table>
    <tr>
        <td>
            <p>
                <select name="metal" id="metal">
                    <option value="9CaratGold">9 Carat Gold.</option>
                    <option value="18CaratGold">18 Carat Gold.</option>
                    <option value="Silver">Silver.</option>
                    <option value="Platinum">Platinum.</option>
                </select>
            </p>
        </td>
        <td>
            <p>
                <select name="currency" id="currency">
                    <option value="GBP">GBP (£)</option>
                    <option value="EUR">EUR (€)</option>
                    <option value="USD">USD ($)</option>
                </select>
            </p>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input maxlength="6" type="number" name="weight" id="weight" style="width:185px;" value="Insert weight (g)">
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <input type="submit" class="calcButton" id="calcButton" onClick="calcPrices()" value="Get a Quote">
        </td>
    </tr>
</table>
<p id="quotation"></p>
<script type="text/javascript">
    var data;
    csv = "9 Carat Gold,18 Carat Gold,Silver,Platinum\n11.87,23.73,0.49,27.52",
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "/echo/html/",
            dataType: "text",
            data: {
                html: csv
            },
            success: function(data) {
                processData(data);
            }
        });
    });

    function processData(allText) {
        var allTextLines = allText.split(/\r\n|\n/);
        headers = allTextLines[0].split(',');
        lines = [];

        for (var i = 1; i < allTextLines.length; i++) {
            data = allTextLines[i].split(',');
            if (data.length == headers.length) {

                var tarr = [];
                for (var j = 0; j < headers.length; j++) {
                    tarr.push(headers[j] + ":" + data[j]);
                }
                lines.push(tarr);
            }
        }
    }

    function calcPrices() {

        var weight = document.getElementById('weight').value;
        var metal = document.getElementById('metal').value;
        var currency = document.getElementById('currency').value;
        var metalPrice;
        var totalPrice;
        var conversionRate;
        var conversionSymbol;

        if (metal === "9CaratGold") {
            metalPrice = data[0];
        }

        if (metal === "18CaratGold") {
            metalPrice = data[1];
        }

        if (metal === "Silver") {
            metalPrice = data[2];
        }

        if (metal === "Platinum") {
            metalPrice = data[3];
        }

        if (currency === "USD") {
            conversionRate = 1.57;
            conversionSymbol = "$";
        }

        if (currency === "EUR") {
            conversionRate = 1.23;
            conversionSymbol = "€";
        }

        if (currency === "GBP") {
            conversionRate = 1.00;
            conversionSymbol = "£";
        }

        totalPrice = ((metalPrice) * (conversionRate));
        totalPrice = ((totalPrice) * (weight));
        totalPrice = totalPrice.toFixed(2);
        if (weight <= 500 && weight >= 1) {
            document.getElementById("quotation").style.color = "black"
            document.getElementById("quotation").innerHTML = (('We can offer you ' + (conversionSymbol + totalPrice)) + ' for ' + weight + 'g.');
        } else {
            document.getElementById("quotation").style.color = "red"
            document.getElementById("quotation").innerHTML = "Please insert a weight between 500 and 1 gram.";
        }
    }
</script>

这是JSFiddle以供参考。 http://jsfiddle.net/KieranOM/u3kxomaa/ 在JSFiddle上，按钮完美运行;但是在本地它点击时什么都不做。

以下是一些重要信息。在JSFiddle和Dreamweaver中，我启用了jQuery 1.8.3。在JSFiddle中，我已禁用onLoad，而是将其更改为

没有换行

对此的任何帮助将不胜感激。

Answer 1

您是否将服务器设置为实际返回数据？

url: "/echo/html/",

需要连接到正在返回值的实际服务器页面...

此外，您不会通过单击按钮取消表单提交。返回false以停止操作。

onClick="calcPrices(); return false"

你真的不应该使用内联事件。

$("#calcButton").on("click, function(e) {
    e.preventDefault();
    calcPrices();
});

JSFiddle JavaScript无法在Dreamweaver中运行

1 个答案: