Question

我正在编写一个计算建筑围栏成本的程序。围栏可以由Chainlink ($25)或Wood ($35)构建，可以添加1-3个门（each individual one costing $165）并包含tax 9% 。我已经完成了几乎所有的工作，但是现在我的问题是找出将总"onclick"设置为什么的问题。我目前读的是"'total = "fence_function()"'"，但我很确定这是错的。我也不知道如何将"onchange"设置为。这是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
<style>
        body{background-color:#e8ddcb}
        h1{color:#093969}
        table{border:#035567}

</style>
    
  <head>
	<meta http-equiv="Content_Type" content="text/html; charset=utf-8"/>
	
	<title> Fence Price Calculator </title>
  </head>
    
  <body>
      <script>
          
        var some_variable = "initial string information";
        var some_other_variable = 56;
		var length=0;
		var width=0;
		var gates=0;
		var total=0;
		var fence_type="Chainlink";
        var price=0;
        

		function fence_function()
		{
            length = document.fen2.len.value;
            width = document.fen3.wid.value;
			var perimeter = 2*length+2*width;
			if(fence_type == "Wooden")
			{
				price = 35*perimeter;
			}
			if(fence_type == "Chainlink")
			{
				price = 25*perimeter;
			}
			price = 165*gates+price;
			price = price*.09+price; 
            disp.value = price;
		}

      </script>
      <center><h1>Fence Price Calculator</h1></center>
        <br>
      
     <center> <table border="1" color= #CDB380>
          <tr>
              <td><i style="color:#036564">Length</i></td>
              <td><i style="color:#036564">Fences</i></td>
              <td><i style="color:#036564">Gates</i></td>
          </tr>
          <tr>
              <td><form name="fen2">
                  <input type="text" size ="5" name="len">
              </form></td>
              <td><button form = "fen" onclick= 'fence_type = "Chainlink"' > Chainlink </button></td>
              <td><button form = "fen" onclick= 'gates = 1' > 1 </button></td>
              <td><button form = "fen" onclick= 'some_variable = "initial string information"; 
                          some_other_variable = 56; disp.value = "0.00"' > Clear </button></td>
          </tr>
          <tr>
              <td><i style="color:#036564">Width</i></td>
              <td><button form = "fen" onclick= 'fence_type = "Wooden"' > Wooden </button></td>
              <td><button form = "fen" onclick= 'gates = 2' > 2 </button></td>
              <td><button form = "fen" onclick= 'total = "fence_function()"' > Total </button></td>
          </tr>
          <tr>
              <td><form name="fen3">
                  <input type="text" size ="5" name="wid">
              </form></td>
              <td></td>
              <td><button form = "fen" onclick= 'gates = 3' > 3 </button></td>
              <td><form name="fen">
                  <input type="text" id="disp" value="0.00" size="5" onchange=' '/>
              </form></td>
          </tr>
      </table> </center>
         
  </body>
    
</html>

Answer 1

在＆＃34; disp＆＃34;中显示总数在文本框中，您需要更改“总计”按钮的onclick以简单地调用该函数：

<button onclick="fence_function();">Total</button>

＆＃34; disp＆＃34;的设置在fence_function函数中完成。您在文本框的onchange事件中不需要任何内容，并且假设它是计算值而不是用户输入的值，您可以考虑更改＆＃34; disp＆＃34;元素到span或div而不是输入，并通过以下方式设置其值：

document.getElementById("disp").innerText = total;

或者您可以在文本框中设置readonly属性。

需要帮助解决问题＆＃34; Total＆＃34;围栏价格计算器的按钮

1 个答案: