我无法使用此程序将最终计算结果输出到网页

时间：2019-10-07 12:16:46

标签： javascript html

我试图在用户单击“转换”按钮后将计算值输出到网页上的屏幕。提交表单时，我已多次检查控制台，但无济于事，没有一个错误。

我还知道整个代码都在被解释，因为我在JS主体的底部放置了一个警报，并在加载页面时显示该警报。

对于只有几周经验的编程人员来说，它还是一个相当新的事物，因此，如果我犯了任何微小的愚蠢错误，我将不胜感激。谢谢

代码：

function setup() {
	
	document.getElementById("currencyValue").style.background = "white";
	document.getElementById("currencyValue").value = "";
	document.getElementById("currency1").value = "GBP";
	document.getElementById("currency2").value = "GBP";
	
}

function validate() {
	
	var valid = true;
	var currencyValue = document.getElementById("currencyValue").value;
	
	if (isNaN(currencyValue) == true) {
		document.getElementById("currencyValue").style.background = "crimson";
		alert("Please enter a numeric value");
		valid = false;
	} else if (currencyValue == "") {
		document.getElementById("currencyValue").style.background = "crimson";
		alert("Please enter a value");
		valid = false;
	} else {
		document.getElementById("currencyValue").style.background = "white";
	}
}

if (valid = true) {
	function calculate() {

		var finalCalc;
		var currencySymbol;
		var currencyCalc1 = document.getElementById("currency1").value;
		var currencyCalc2 = document.getElementById("currency2").value;

		//[gbp], [eur], [jpy], [usd]
		const gbp = [1, 1.12, 131.86, 1.23];
		const eur = [0.89, 1, 117.43, 1.10];
		const jpy = [0.0076, 0.0085, 1, 0.0094];
		const usd = [0.81, 0.91, 106.94, 1];

		if (currencyCalc1 == "GBP" && currencyCalc2 == "GBP") {
			finalCalc = gbp[0];
		} else if (currencyCalc1 == "GBP" && currencyCalc2 == "EUR") {
			finalCalc = gbp[1];
		} else if (currencyCalc1 == "GBP" && currencyCalc2 == "JPY") {
			finalCalc = gbp[2];
		} else if (currencyCalc1 == "GBP" && currencyCalc2 == "USD") {
			finalCalc = gbp[3];
		//EUR
		} else if (currencyCalc1 == "EUR" && currencyCalc2 == "GBP") {
			finalCalc = eur[0];
		} else if (currencyCalc1 == "EUR" && currencyCalc2 == "EUR") {
			finalCalc = eur[1];
		} else if (currencyCalc1 == "EUR" && currencyCalc2 == "JPY") {
			finalCalc = eur[2];
		} else if (currencyCalc1 == "EUR" && currencyCalc2 == "USD") {
			finalCalc = eur[3];
		//JPY
		} else if (currencyCalc1 == "JPY" && currencyCalc2 == "GBP") {
			finalCalc = jpy[0];
		} else if (currencyCalc1 == "JPY" && currencyCalc2 == "EUR") {
			finalCalc = jpy[1];
		} else if (currencyCalc1 == "JPY" && currencyCalc2 == "JPY") {
			finalCalc = jpy[2];
		} else if (currencyCalc1 == "JPY" && currencyCalc2 == "USD") {
			finalCalc = jpy[3];
		//USD
		} else if (currencyCalc1 == "USD" && currencyCalc2 == "GBP") {
			finalCalc = usd[0];
		} else if (currencyCalc1 == "USD" && currencyCalc2 == "EUR") {
			finalCalc = usd[1];
		} else if (currencyCalc1 == "USD" && currencyCalc2 == "JPY") {
			finalCalc = usd[2];
		} else if (currencyCalc1 == "USD" && currencyCalc2 == "USD") {
			finalCalc = usd[3];
		}
			

		if (currencyCalc2 == "GBP") {
			currencySymbol = "£";
		} else if (currencyCalc2 == "EUR") {
			currencySymbol = "€";
		} else if (currencyCalc2 == "JPY") {
			currencySymbol = "¥";
		} else if (currencyCalc2 == "USD") {
			currencySymbol = "$";
		}
		
		document.getElementById("finalResult").innerHTML = currencySymbol + (finalCalc * currencyValue);
		
	}
}	 
<!DOCTYPE html>
<html>
<head>
    <title>Currency converter</title>
    <link href="currencyStyles.css" type="text/css" rel="stylesheet"></link>
    <link href="favicon.ico" rel="icon"></link>
    <script src="currencyScript.js" type="text/javascript"></script>
</head>
<body>
    <div id="containerDiv">
        <h3 id="title">CURRENCY CONVERTER</h3>
        <div class="userInterfaceDivs">
            <table id="userInterfaceTable">
                <tr>
                    <td>
                        Convert  
                    </td>
                    <td>
                        <input id="currencyValue" class="interfaceElements" type="text" placeholder="Currency">
                        <select id="currency1" class="interfaceElements">
                        <option>GBP</option>
                        <option>EUR</option>
                        <option>JPY</option>
                        <option>USD</option>
                    </td>
                    <td> </td>
                    <td>
                        to  
                    </td>
                    <td>
                        <select id="currency2" class="interfaceElements">
                        <option>GBP</option>
                        <option>EUR</option>
                        <option>JPY</option>
                        <option>USD</option>
                    </td>
                    <td>
                    </td>
                    <td>
                        <button class="interfaceElements" type="button" onClick="validate()">Convert</button>
                        <button class="interfaceElements" type="button" onClick="setup()">Reset</button>
                    </td>
                </tr>
            </table>
        </div>

        <div class="userInterfaceDivs" id="resultDiv">
            <table>
                <tr>
                    <td>The result is: </td>
                    <td id="finalResult"> </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

我在代码中发现2个问题。

  1. 您根本没有调用calculate函数。 在calculate函数的else部分中调用validate函数
  2. currencyValue变量未在calculate函数内部初始化。 在calculate函数开始时启动

我刚刚在以下代码中添加了有关更改的评论，请查看。

    function setup() {

      document.getElementById("currencyValue").style.background = "white";
      document.getElementById("currencyValue").value = "";
      document.getElementById("currency1").value = "GBP";
      document.getElementById("currency2").value = "GBP";

    }

    function validate() {

      var currencyValue = document.getElementById("currencyValue").value;

      if (isNaN(currencyValue) == true) {
        document.getElementById("currencyValue").style.background = "crimson";
        alert("Please enter a numeric value");
      } else if (currencyValue == "") {
        document.getElementById("currencyValue").style.background = "crimson";
        alert("Please enter a value");
      } else {
        document.getElementById("currencyValue").style.background = "white";
        calculate();// here is calling the calculate function after validating the input.
      }

    }


    function calculate() {

      var finalCalc;
      var currencySymbol;
      var currencyCalc1 = document.getElementById("currency1").value;
      var currencyCalc2 = document.getElementById("currency2").value;
      //currencyValue initiating from input field.
      var currencyValue = document.getElementById("currencyValue").value;

      //[gbp], [eur], [jpy], [usd]
      const gbp = [1, 1.12, 131.86, 1.23];
      const eur = [0.89, 1, 117.43, 1.10];
      const jpy = [0.0076, 0.0085, 1, 0.0094];
      const usd = [0.81, 0.91, 106.94, 1];

      if (currencyCalc1 == "GBP" && currencyCalc2 == "GBP") {
        finalCalc = gbp[0];
      } else if (currencyCalc1 == "GBP" && currencyCalc2 == "EUR") {
        finalCalc = gbp[1];
      } else if (currencyCalc1 == "GBP" && currencyCalc2 == "JPY") {
        finalCalc = gbp[2];
      } else if (currencyCalc1 == "GBP" && currencyCalc2 == "USD") {
        finalCalc = gbp[3];
        //EUR
      } else if (currencyCalc1 == "EUR" && currencyCalc2 == "GBP") {
        finalCalc = eur[0];
      } else if (currencyCalc1 == "EUR" && currencyCalc2 == "EUR") {
        finalCalc = eur[1];
      } else if (currencyCalc1 == "EUR" && currencyCalc2 == "JPY") {
        finalCalc = eur[2];
      } else if (currencyCalc1 == "EUR" && currencyCalc2 == "USD") {
        finalCalc = eur[3];
        //JPY
      } else if (currencyCalc1 == "JPY" && currencyCalc2 == "GBP") {
        finalCalc = jpy[0];
      } else if (currencyCalc1 == "JPY" && currencyCalc2 == "EUR") {
        finalCalc = jpy[1];
      } else if (currencyCalc1 == "JPY" && currencyCalc2 == "JPY") {
        finalCalc = jpy[2];
      } else if (currencyCalc1 == "JPY" && currencyCalc2 == "USD") {
        finalCalc = jpy[3];
        //USD
      } else if (currencyCalc1 == "USD" && currencyCalc2 == "GBP") {
        finalCalc = usd[0];
      } else if (currencyCalc1 == "USD" && currencyCalc2 == "EUR") {
        finalCalc = usd[1];
      } else if (currencyCalc1 == "USD" && currencyCalc2 == "JPY") {
        finalCalc = usd[2];
      } else if (currencyCalc1 == "USD" && currencyCalc2 == "USD") {
        finalCalc = usd[3];
      }


      if (currencyCalc2 == "GBP") {
        currencySymbol = "£";
      } else if (currencyCalc2 == "EUR") {
        currencySymbol = "€";
      } else if (currencyCalc2 == "JPY") {
        currencySymbol = "¥";
      } else if (currencyCalc2 == "USD") {
        currencySymbol = "$";
      }

      document.getElementById("finalResult").innerHTML = currencySymbol + (finalCalc * currencyValue);

    }
相关问题
最新问题