Форма представления не отображается Выход 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

Theres несколько вещей, которые нуждаются в обновлении.

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() функция будет return true, то ваша форма будет отправлена ​​на index.html, и на этой странице будет потеряно все, что произошло в buttonandchecks(). Вместо этого вам может потребоваться вернуть этот метод false или удалить тег формы.

Некоторые примеры этих изменений, вы можете увидеть его работы в этом JS скрипку: https://jsfiddle.net/igor_9000/qfz6dr25/2/

Надежда, что помогает!