表单提交不显示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/

希望帮助！