HTML和Javascript window.prompt

Question

對javascript和html類型的東西非常新。 我只想舉一個使用用戶輸入並將其輸出到表中的簡單示例。 我在獲取窗口提示時遇到了麻煩。 我想我確實在做錯事，但我目前還沒有看到……我正在學校上課，但這不是家庭作業，只是我自己做的練習。

這與while循環有關嗎？ 關於我應如何繼續提示用戶直到他們另有說明的任何建議？

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Mileage Record</title>
<style type = "text/css">
    table {
        width:300px;
        border-collapse:collapse;
        background-color:lightblue;
        }
    table, td, th {
        border: 1px solid black;
        padding: 4px;
        }
    th {
        text-align: left;
        color: white;
        background-color: darkblue
        }
    tr.oddrow {
        background-color: white;
        }
</style>

<script>
    var milesDriven;
    var gallonsUsed;
    var mpg;
    var anyMore;

    document.writeln("<table>");
    document.writeln("<thead><tr><th>Miles Driven</th>");
    document.writeln("<th>Gallons Used</th>");
    document.writeln("<th>MPG</th>");
    document.writeln("</tr></thead><tbody>");

    while (anyMore == true) {
        milesDriven = window.prompt("How many miles did you drive?");
        gallonsUsed = window.prompt("How many gallons did you use?");
        mpg = milesDrive/gallonsUsed;
        document.writln("<tr><td>" + milesDriven + "</td><td>" + 
            gallonsUsed + "</td><td>" + mpg + "</td></tr>");

        anymore = confirm("Do you have any more data to input?");
    }
    document.writeln("</tbody></table>");

</script>

Answer 1

該方法存在幾個問題。 您不應使用document.writeln()來修改文檔內容。 而是創建元素並將其添加到文檔樹中。 一個好的JavaScript教程應該告訴您如何做到這一點。 它還將解釋標識符是區分大小寫的，所以你不能只寫anyMore這里anymore那里。 您在標識符中也有其他錯別字。 而且，由於未定義的值不等於true ，因此永遠不會執行循環。

Answer 2

<pre>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Mileage Record</title>
<style type = "text/css">
    table {
        width:300px;
        border-collapse:collapse;
        background-color:lightblue;
        }
    table, td, th {
        border: 1px solid black;
        padding: 4px;
        }
    th {
        text-align: left;
        color: white;
        background-color: darkblue
        }
    tr.oddrow {
        background-color: white;
        }
</style>

<script>
   // var milesDriven;
  //  var gallonsUsed;
  //  var mpg;
    var anyMore=0;
    var str="<table>";
        str+="<thead><tr><th>Miles Driven</th>";
        str+="<th>Gallons Used</th>";
        str+="<th>MPG</th>";
        str+="</tr></thead><tbody>";


function milesDriven(){
  return window.prompt("How many miles did you drive?");
}

function gallonsUsed(){
  return window.prompt("How many gallons did you use?");
}

function mpg(){
 return milesDriven()/gallonsUsed();
}


function addComponentsToDOM(){
    while (anyMore<3) { //not 0 is true or not undefined is true or not null is true 
    str+="<tr><td>" + milesDriven() + "</td><td>" + 
            gallonsUsed() + "</td><td>" + mpg() + "</td></tr>"
      //  anymore = confirm("Do you have any more data to input?");
      anyMore++;
    }

    str+="</tbody></table>";
    //document.writeln(); i suggest you not use this method add component to DOM tree
    //because  this method first empty DOM tree content
     document.body.innerHTML=str;
 }


//why use this event,because window after  loaded document.body not null
 window.onload=addComponentsToDOM;


</script>
</pre>

HTML和Javascript window.prompt

問題描述

2 個解決方案

解決方案1
3 已采納 2012-06-24 21:47:05

解決方案2
0 2012-06-25 03:22:02

HTML和Javascript window.prompt

問題描述

2 個解決方案

解決方案1 3 已采納 2012-06-24 21:47:05

解決方案2 0 2012-06-25 03:22:02

解決方案1
3 已采納 2012-06-24 21:47:05

解決方案2
0 2012-06-25 03:22:02