问住宿检查任务
EN

Stack Overflow用户

提问于 2018-09-28 05:02:08

回答 1查看 33关注 0票数 0

我们有一个任务，使用javascript和html的组合制作一个基本的旅游成本计算器。我正在使用开发人员控制台修复错误，突然，所有错误都消失了，页面上的所有内容都消失了。什么都没有了。我试着一次删除代码的某些部分，试图找出导致这种情况的原因，但我什么也找不到。有人能发现导致这个问题的原因吗？谢谢!

<script>
var dailycost = 0;
var radiobutton;
var checkbox;
var duration = 0;
var total = 0;

function getcost(){
        for (var i = 1; i<=3; i++){
            radiobutton = document.getElementByID("accomodation" + i);
            if (radiobutton.checked == true){
                dailycost = radiobutton.value;
            }
        }
        if (dailycost == 0){
            alert("No accomodation type was selected.");
            return;
        }

    checkbox = document.getElementByID("peakSeason");
        if (checkbox.checked == true){
            dailyCost = parseFloat(dailycost) + 20;
        }
        for (var i = 1; i <= 4; i++){
            radiobutton = document.getElementByID("duration");
            if (radiobutton.checked == true){
            duration = radioButton.value;
            }
        }
        if (duration == 0){
            alert("A duration was not selected.");
            return;
    }
        totalcost = dailycost * duration;
        totalcost = math.round(totalcost);
        alert("This tour will cost " + totalcost +'$');
    }
</script>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-28 05:11:05

有这么多不同的排字/错误。解决办法如下：

无线电按钮!= radiobutton
遗失身份证以供住宿
持续时间后缺失+ i
math.round != Math.round

    var dailycost = 0;
    var radiobutton;
    var checkbox;
    var duration = 0;
    var total = 0;

	function getcost(){
    		for (var i = 1; i<=3; i++){
    	        radiobutton = document.getElementById("accomodation" + i);
    			if (radiobutton.checked == true){
    				dailycost = radiobutton.value;
    			}
    		}
    		if (dailycost == 0){
    			alert("No accomodation type was selected.");
    			return;
    		}
    
		    checkbox = document.getElementById("peakseason");
    		if (checkbox.checked == true){
    			dailycost = parseFloat(dailycost) + 20;
    		}
    		for (var i = 1; i <= 4; i++){
    			radiobutton = document.getElementById("duration" + i);
    			if (radiobutton.checked == true){
				duration = radiobutton.value;
    			}
    		}
    		if (duration == 0){
    			alert("A duration was not selected.");
    			return;
		}
    		totalcost = dailycost * duration;
    		totalcost = Math.round(totalcost);
    		alert("This tour will cost " + totalcost +'$');
    	}

<h1>USA Tour Cost Calculator</h1>
<h4>Complete the following form to calculate the cost of your tour.</h4>
<form name="tourform">
<p>Accomodation Type:<br>
<input type="radio" name="accomodation" id="accomodation1" value="95.5"> Camping<br>
<input type="radio" name="accomodation" id="accomodation2" value="140.3"> Budget Hotel<br>
<input type="radio" name="accomodation" id="accomodation3" value="170.7"> Premier Hotel<br>
 
<p><label for="peakseason">Click here if you are traveling between June and August.</label>
<input type="checkbox" id="peakseason" name="peakseason"></p>
 
<p>Tour Duration:<br>
<input type ="radio" name="duration" id="duration1" value="4"> <label for="duration1">4 days</label><br>
<input type ="radio" name="duration" id="duration2" value="7"> <label for="duration1">7 days</label><br>
<input type ="radio" name="duration" id="duration3" value="14"> <label for="duration1">14 days</label><br>
<input type ="radio" name="duration" id="duration4" value="20"> <label for="duration1">20 days</label><br><br>
 
<input type ="button" value ="Calculate" onClick="getcost();">
<input type ="reset" value ="Reset"></p>
</form>

不过，我会将其简化如下(删除循环，避免标识每个输入，并避免在函数之外添加变量)：

function getcost(){
  const acc = document.querySelectorAll('input[name=accomodation]:checked');
  
  if (!acc.length) {
    alert("No accomodation type was selected.");
    return;
  }
  
  let dailycost = parseFloat(acc[0].value);

  const checkbox = document.getElementById("peakseason");
  if (checkbox.checked){
    dailycost += 20;
  }
  
  const durationInput = document.querySelectorAll('input[name=duration]:checked');
  
  if (!durationInput.length) {
    alert("A duration was not selected.");
    return;
  }
  
  const duration = durationInput[0].value;
  
  const totalcost = Math.round(dailycost * duration);
  alert("This tour will cost " + totalcost +'$');
}

<h1>USA Tour Cost Calculator</h1>
<h4>Complete the following form to calculate the cost of your tour.</h4>
<form name="tourform">
<p>Accomodation Type:<br>
<input type="radio" name="accomodation" value="95.5"> Camping<br>
<input type="radio" name="accomodation" value="140.3"> Budget Hotel<br>
<input type="radio" name="accomodation" value="170.7"> Premier Hotel<br>
 
<p><label for="peakseason">Click here if you are traveling between June and August.</label>
<input type="checkbox" id="peakseason" name="peakseason"></p>
 
<p>Tour Duration:<br>
<input type ="radio" name="duration" value="4"> <label for="duration1">4 days</label><br>
<input type ="radio" name="duration" value="7"> <label for="duration1">7 days</label><br>
<input type ="radio" name="duration" value="14"> <label for="duration1">14 days</label><br>
<input type ="radio" name="duration" value="20"> <label for="duration1">20 days</label><br><br>
 
<input type ="button" value="Calculate" onClick="getcost();">
<input type ="reset" value="Reset"></p>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52548613

复制

相似问题

问住宿检查任务
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问住宿检查任务EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问住宿检查任务
EN