表單提交不顯示JavaScript輸出

Question

嘗試擁有它，以便當用戶點擊提交時，它會顯示他們的信息輸入和計算在JavaScript中完成的音量/成本。然而，點擊提交按鈕時不會顯示任何內容。對不起，我可憐的英語，如果它不明確。讓我知道你是否需要澄清任何事情。下面是相關的代碼： HTML：

<form name="landscape" action="index.html" onsubmit="return validateForm()" method="post"> 
... 
... 

<h3>Type of Planter:</h3> 
<input type="radio" name="inputcontrol" value="10" id="inputcontrol1" onchange="setvisible(this.value)">Square/Rectangular Cubes 
<input type="radio" name="inputcontrol" value="12" id="inputcontrol2" onchange="setvisible(this.value)">Flat bottmed cylinders 
<br> 
<input type="radio" name="inputcontrol" value="15" id="inputcontrol3" onchange="setvisible(this.value)">1/2 Spherical 
type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone 
<br> 
<br> 
Length:<p><input type="text" size="10" id="set1" style="visibility:hidden;" ></p> 
Width:<p><input type="text" size="10" id="set2"style="visibility:hidden;" ></p> 
Height:<p><input type="text" size="10" id="set3"style="visibility:hidden;" ></p> 
Radius:<p><input type="text" size="10" id="set4"style="visibility:hidden;" ></p> 
Radius2:<p><input type="text" size="10" id="set5"style="visibility:hidden;" ></p> 
<input type=submit value="Submit" onClick="buttonandchecks();"> 
</form> 
<br> 
<br> 
<h2>Order Form: </h2><h2><span id="result"></span></h2> 


</body> 
</html> 

JAVASCRIPT：

function buttonandchecks() 
{ 

var x; 
var radio_value; 
var planter=""; 
var infooutput=""; 
var total=parseFloat(0); 
var volume=parseFloat(0); 
var length = document.getElementById("set1").value; 
var width = document.getElementById("set2").value; 
var height = document.getElementById("set3").value; 
var radius = document.getElementById("set4").value; 
var radius2 = document.getElementById("set5").value; 
var inputcontrol1 = document.getElementById("inputcontrol1"); 
var inputcontrol2 = document.getElementById("inputcontrol2"); 
var inputcontrol3 = document.getElementById("inputcontrol3"); 
var inputcontrol4 = document.getElementById("inputcontrol4"); 

     for(x=0;x<document.landscape.inputcontrol.length;x++) 
     { 
     if(document.landscape.inputcontrol[x].checked) 
      { 
      radio_value=document.lanscape.inputcontrol[x].value; 
      } 
     } 
     radio_value=parseFloat(radio_value); 

    if(inputcontrol1.checked) 
    { 
     volume = length * width * height; 
     planter = "Square/Rectangular Cubes"; 
    } 
    if(inputcontrol2.checked) 
    { 
     volume = 3.14 * radius * radius * height; 
     planter = "Flat bottomed cylinders"; 
    } 
    if(inputcontrol3.checked) 
    { 
     volume = 1/2 * (4/3* 3.14 * radius * radius * radius); 
     planter = "1/2 Spherical"; 
    } 
    if(inputcontrol4.checked) 
    { 
     volume = 1/3*3.14*(radius*radius*radius*radius2*radius2*radius2)*height; 
     planter = "Truncated cone"; 
    } 
total=radio_value * volume; 
infooutput=("Firstname: " + (Text1).value + " Lastname: " + (Lname).value + " \nAddress: " + (Add).value + " \nPostal Code: " + (StPrv).value + "\n\n Planter: " + planter + "\nLength: " + length + " Width: " + width + " Height: " + height + " radius: " + radius + " 2nd radius: " + radius2 + "\n Volume: " + volume + "\n Total: " + total); 
document.getElementById("result").innerHTML=infooutput; 
} 

任何幫助將不勝感激。對不起，如果我的代碼不好，我剛剛開始學習一週前。謝謝！

Answer 1

這裏有一些需要更新的東西。

HTML

你的最後一個輸入不正確的結構。

type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)">Truncated Cone

相反，嘗試：

<label><input type="radio" name="inputcontrol" id="inputcontrol4" value="20" onchange="setvisible(this.value)" />Truncated Cone</label>

的JavaScript

之類的東西document.landscape.inputcontrol[x].checked和(Text1).value不能訪問DOM元素的有效途徑。相反，嘗試document.getElementById()或document.getElementsByName()

例如，更改

for(x=0;x<document.landscape.inputcontrol.length;x++) 
{ 
if(document.landscape.inputcontrol[x].checked) 
    { 
    radio_value=document.lanscape.inputcontrol[x].value; 
    } 
} 

要這樣：（注意爲可讀性的支架位置和縮進）

checkboxes = document.getElementsByName('inputcontrol'); 

for(x=0;x<checkboxes.length;x++) { 
    if(checkboxes[x].checked) { 
     radio_value=checkboxes[x].value; 
    } 
} 

最後，如果你validateForm()功能是要返回true，那麼你的表單將發佈到index.html，頁面將加載丟失在buttonandchecks()發生的任何事情。相反，您可能需要讓該方法返回false，或者移除表單標記。

對於這些變化的一些例子，你可以看到它在這方面的工作JS小提琴：https://jsfiddle.net/igor_9000/qfz6dr25/2/

希望幫助！