Javascript將不會計算

Question

任何人都可以指出我正確的方向，爲什麼我的計算按鈕不會計算。它甚至不會將任何錯誤消息放到屏幕上，但我的清除按鈕確實有效。這可能很小，但我無法想象出我的生活--_-。

var $ = function(id) { 
 
    return document.getElementById(id); 
 
} 
 
var virusRemovalPrice = 20.00; 
 
var websiteMakingCost = 75.00; 
 
var computerServicingCost = 100.00; 
 

 
var calculateTotal = function() { 
 
    var virusRemoval = parseFloat($("virusRemoval").value); 
 
    var websiteMaking = parseFloat($("websiteMaking").value); 
 
    var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value); 
 
    var totalCost = parseFloat(($("totalCost").value)); 
 

 
    if (isNaN(virusRemoval) || virusRemoval < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("virusRemoval").focus() 
 
    } else if (isNaN(websiteMaking) || websiteMaking < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("websiteMaking").focus() 
 
    } else if (isNaN(computerOptimizationAndSetUp) || computerOptimizationAndSetUp < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("computerOptimizationAndSetUp").focus() 
 
    } else { 
 
    do { 
 
     var ii = 0; 
 
     var cost = ((virusRemovalPrice * virusRemoval) + (websiteMakingCost * websiteMaking) + (computerServicingCost * computerOptimizationAndSetUp)); 
 
     $("cost").value = cost.toFixed(2); //total cost final 
 
     if (cost > 1) { 
 
     alert("Your total is " + cost + " hope to see you soon!"); 
 
     } 
 
    } while (ii = 0) 
 

 

 
    } 
 

 

 

 
}; 
 
var clearValues = function() { 
 
    var virusRemoval = parseFloat($("virusRemoval").value = ""); 
 
    var websiteMaking = parseFloat($("websiteMaking").value = ""); 
 
    var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value = ""); 
 
    var totalCost = parseFloat($("totalCost").value = ""); 
 
}

<form class="anotheremoved"> 
 
    <h2>Total Cost</h2> 
 
    <label for="virusRemoval">Virus Removal:</label> 
 
    <br /> 
 
    <input type="text" id="virusRemoval"> 
 
    <br /> 
 

 
    <label for="websiteMaking">Website Design:</label> 
 
    <br /> 
 
    <input type="text" id="websiteMaking"> 
 
    <br /> 
 

 
    <label for="computerOptimizationAndSetUp">Computer Setup:</label> 
 
    <br /> 
 
    <input type="text" id="computerOptimizationAndSetUp"> 
 
    <br /> 
 
    <br /> 
 
    <label for="totalCost">Your Total Cost is:</label> 
 
    <input type="text" id="TotalCost" disabled> 
 
    <br /> 
 
    <input class="removed" type="button" id="calculateTotal" value="Calculate " onblur="calculateTotal()"> 
 
    <input class="removed" type="button" id="clear" value="Clear" onclick="clearValues()"> 
 
</form>

之所以環路是有，因爲我們需要有一個循環，我找不到一個很好的理由有一個，所以我用一個會永遠是真實的讓它遠離大聲笑。可能會對我或某事拋出一個無限循環，但我會在後來看到這一點，我只是試圖讓事情在這裏做點事哈哈。我試圖重寫這2次，仍然到達相同的位置，所以我意識到它可能很小，而我是Javascript的新手。謝謝。

Answer 1

問題是您在輸入按鈕中有id="calculateTotal"。元素ID會自動變成頂級變量，因此這將取代名爲calculateTotal的函數。只需爲該功能提供與按鈕ID不同的名稱即可。

您還有一個錯字。總成本字段的ID爲TotalCost，但代碼使用$('totalCost')和$（'cost'）。

最好在onclick而不是onblur進行計算。否則，你必須點擊按鈕，然後點擊其他內容才能看到結果。

在clearValues函數中，不需要指定變量並調用parseFloat。只需將每個值設置爲空字符串即可。您也可以使用<input type="reset">，它將窗體中的所有輸入自動重置爲其初始值。

var $ = function(id) { 
 
    return document.getElementById(id); 
 
} 
 
var virusRemovalPrice = 20.00; 
 
var websiteMakingCost = 75.00; 
 
var computerServicingCost = 100.00; 
 

 
var calculateTotal = function() { 
 
    var virusRemoval = parseFloat($("virusRemoval").value); 
 
    var websiteMaking = parseFloat($("websiteMaking").value); 
 
    var computerOptimizationAndSetUp = parseFloat($("computerOptimizationAndSetUp").value); 
 
    var totalCost = parseFloat(($("TotalCost").value)); 
 

 
    if (isNaN(virusRemoval) || virusRemoval < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("virusRemoval").focus() 
 
    } else if (isNaN(websiteMaking) || websiteMaking < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("websiteMaking").focus() 
 
    } else if (isNaN(computerOptimizationAndSetUp) || computerOptimizationAndSetUp < 0) { 
 
    alert("Value must be numeric and at least zero. "); 
 
    $("computerOptimizationAndSetUp").focus() 
 
    } else { 
 
    do { 
 
     var ii = 0; 
 
     var cost = ((virusRemovalPrice * virusRemoval) + (websiteMakingCost * websiteMaking) + (computerServicingCost * computerOptimizationAndSetUp)); 
 
     $("TotalCost").value = cost.toFixed(2); //total cost final 
 
     if (cost > 1) { 
 
     alert("Your total is " + cost + " hope to see you soon!"); 
 
     } 
 
    } while (ii = 0) 
 
    } 
 
}; 
 

 
var clearValues = function() { 
 
    $("virusRemoval").value = ""; 
 
    $("websiteMaking").value = ""; 
 
    $("computerOptimizationAndSetUp").value = ""; 
 
    $("TotalCost").value = ""; 
 
}

<form class="anotheremoved"> 
 
    <h2>Total Cost</h2> 
 
    <label for="virusRemoval">Virus Removal:</label> 
 
    <br /> 
 
    <input type="text" id="virusRemoval"> 
 
    <br /> 
 

 
    <label for="websiteMaking">Website Design:</label> 
 
    <br /> 
 
    <input type="text" id="websiteMaking"> 
 
    <br /> 
 

 
    <label for="computerOptimizationAndSetUp">Computer Setup:</label> 
 
    <br /> 
 
    <input type="text" id="computerOptimizationAndSetUp"> 
 
    <br /> 
 
    <br /> 
 
    <label for="totalCost">Your Total Cost is:</label> 
 
    <input type="text" id="TotalCost" disabled> 
 
    <br /> 
 
    <input class="removed" type="button" id="calculateTotalButton" value="Calculate " onclick="calculateTotal()"> 
 
    <input class="removed" type="button" id="clear" value="Clear" onclick="clearValues()"> 
 
</form>