Question

我想创建一个带有循环的html <table>，该循环使输出自动在表中，但由于某种原因，它似乎不能在我的for循环中工作。

这应该是将Celsius转换为Fahrenheit的输出：

0 Celsius = 32.00 Fahrenheit
5 Celsius = 41.00 Fahrenheit
10 Celsius = 50.00 Fahrenheit
15 Celsius = 59.00 Fahrenheit
20 Celsius = 68.00 Fahrenheit
25 Celsius = 77.00 Fahrenheit
30 Celsius = 86.00 Fahrenheit
35 Celsius = 95.00 Fahrenheit
40 Celsius = 104.00 Fahrenheit
45 Celsius = 113.00 Fahrenheit
50 Celsius = 122.00 Fahrenheit
55 Celsius = 131.00 Fahrenheit
60 Celsius = 140.00 Fahrenheit
65 Celsius = 149.00 Fahrenheit
70 Celsius = 158.00 Fahrenheit
75 Celsius = 167.00 Fahrenheit
80 Celsius = 176.00 Fahrenheit
85 Celsius = 185.00 Fahrenheit
90 Celsius = 194.00 Fahrenheit
95 Celsius = 203.00 Fahrenheit
100 Celsius = 212.00 Fahrenheit
105 Celsius = 221.00 Fahrenheit
110 Celsius = 230.00 Fahrenheit

这应该是将华氏温度转换为摄氏温度的输出：

30 Fahrenheit = -1.11 Celsius
40 Fahrenheit = 4.44 Celsius
50 Fahrenheit = 10.00 Celsius
60 Fahrenheit = 15.56 Celsius
70 Fahrenheit = 21.11 Celsius
80 Fahrenheit = 26.67 Celsius
90 Fahrenheit = 32.22 Celsius
100 Fahrenheit = 37.78 Celsius
110 Fahrenheit = 43.33 Celsius
120 Fahrenheit = 48.89 Celsius
130 Fahrenheit = 54.44 Celsius
140 Fahrenheit = 60.00 Celsius
150 Fahrenheit = 65.56 Celsius
160 Fahrenheit = 71.11 Celsius
170 Fahrenheit = 76.67 Celsius
180 Fahrenheit = 82.22 Celsius
190 Fahrenheit = 87.78 Celsius
200 Fahrenheit = 93.33 Celsius
210 Fahrenheit = 98.89 Celsius
220 Fahrenheit = 104.44 Celsius
230 Fahrenheit = 110.00 Celsius

以下是javascript代码：

<!-- language: lang-js -->

    function StartCelsiusCalculation() {

        var c = document.getElementById("celsius").value;
        var step = 0;
        var min = 0;
        var max = 0;
        var i = {};
        // Convert a temperature in Celsius to Fahrenheit.

        function celsius2fahrenheit(c) {
            var f = c * 1.8 + 32;
            return f;
        }

        function generateCelsius2FahrenheitHTMLTable( min, max, step) {
            for (var i = min; i <= max; i + step, c + step){
            var emitter = '<tr><td>'+c+'</td><td>'+celsius2fahrenheit(c)+'</td></tr></br><br>';
            return emitter;
            }
        }

        document.write('<p><table border:1><tr><th>celsius</th><th>fahrenheit</th></tr></p><br>')
        document.write(generateCelsius2FahrenheitHTMLTable(0, 110, 5));
        document.write('</br>');
        document.write('</table>')
        document.write('<p>')
    }

    //Here starts the form of calculating Fahrenheit to celsius.

    function StartFahrenheitCalculation() {

        var f = document.getElementById("fahrenheit").value;
        var step = 0;
        var min = 0;
        var max = 0;
        var i = {};

        function fahrenheit2celsius(f) {
            var c = (f - 32) / 1.8;
            return c;
        }

        function generateFahrenheit2CelsiusHTMLTable( min, max, step) {
            for (i = min; i <= max; i + step, f + step){
                var emitter = '<tr><td>'+f+'</td><td>'+fahrenheit2celsius(f)+'</td></tr></br><br>'
                return emitter;
            }
        }

        document.write('<table border:1><tr><th>fahrenheit</th><th>celsius</th></tr></p><br>')
        document.write(generateFahrenheit2CelsiusHTMLTable(30, 230, 10));
        document.write('</br>');
        document.write('</table>')
        document.write('</p>')
    }

这是css代码：

<!-- language: lang-css -->

    body {
        font-family: sans-serif;
        background-color: #fff;
        font-size: 13px;
        padding: 0px;
        margin: 0px;
    }

    #container {
        margin-left: 10px;
    }

这是html代码：

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
        <head>
            <title>Fahrenheit - Celsius</title>
            <link rel="stylesheet" type="text/css" href="css/mystyle.css">
        </head>
        <body>
            <div id="container">
                <h2>Celsius to Fahrenheit and back.</h2>
                <p>
                <input type="text" id="celsius" value="wat is de celcius?"> <button onclick="StartCelsiusCalculation()">Calculate Celsius</button></p>
                <p>
                <input type="text" id="fahrenheit" value="wat is de fahrenheit?"> <button onclick="StartFahrenheitCalculation()">Calculate fahrenheit</button></p>
                <p>
                    <script src="js/fc_implementation.js"></script>
                </p>
            </div>
        </body>
    </html>

Answer 1

以下是我将如何更改您的代码

加载后不要使用document.write。它将擦除页面和脚本。
将函数移到main函数之外，因为它们是真正的成员函数
连接html并使用innerHTML
将值传递给函数，然后立即将它们归零 - 要么将它们作为函数中的变量而不传递它们，要么不将它们作为函数中的变量并传递它们。我从这里的功能中删除了它们
解析字段中的值
将发射器移到环路外
从表格中删除非法代码，例如br和代码之间的p

＆＃13;

function celsius2fahrenheit(c) {
  var f = c * 1.8 + 32;
  return f;
}

function fahrenheit2celsius(f) {
  var c = (f - 32) / 1.8;
  return c;
}

function generateCelsius2FahrenheitHTMLTable(min, max, step) {
  var c = parseInt(document.getElementById("celsius").value,10), emitter="";
  if (isNaN(c) || c=="") c=0;
  for (var i = min; i <= max; i += step, c += step) {
    emitter += '<tr><td>' + c + '</td><td>' + celsius2fahrenheit(c) + '</td></tr>';
  }
  return emitter;
}

function generateFahrenheit2CelsiusHTMLTable(min, max, step) {
  var f = parseInt(document.getElementById("fahrenheit").value,10), emitter="";
  if (isNaN(f) || f=="") c=0;
  for (var i = min; i <= max; i += step, f += step) {
    emitter += '<tr><td>' + f + '</td><td>' + fahrenheit2celsius(f) + '</td></tr>'
  }
  return emitter;
}



function StartCelsiusCalculation() {
  // Convert a temperature in Celsius to Fahrenheit.
  var html = "";
  html+='<table border:1><tr><th>celsius</th><th>fahrenheit</th></tr>';
  html+=generateCelsius2FahrenheitHTMLTable(0, 110, 5);
  html+='</table>';
  document.getElementById("resultF").innerHTML=html;
}


function StartFahrenheitCalculation() {
//Here starts the form of calculating Fahrenheit to celsius.
  var html = "";
  html+='<table border:1><tr><th>fahrenheit</th><th>celsius</th></tr>';
  html+=generateFahrenheit2CelsiusHTMLTable(30, 230, 10);
  html+='</table>';
  document.getElementById("resultC").innerHTML=html;
}

＆＃13;

body {
  font-family: sans-serif;
  background-color: #fff;
  font-size: 13px;
  padding: 0px;
  margin: 0px;
}
#container {
  margin-left: 10px;
}

＆＃13;

<div id="container">
  <h2>Celsius to Fahrenheit and back.</h2>
  <p>
    <input type="text" id="celsius" placeholder="wat is de celcius?" value="" />
    <button type="button" onclick="StartCelsiusCalculation()">Calculate Celsius</button>
  </p>
  <p>
    <input type="text" id="fahrenheit" placeholder="wat is de fahrenheit?" value="" />
    <button type="button" onclick="StartFahrenheitCalculation()">Calculate fahrenheit</button>
  </p>
</div>
<div id="resultC"></div>
<div id="resultF"></div>

＆＃13;

Answer 2

你的for循环没有在文档上写任何内容。此外，它在第一次迭代时返回。你应该这样做：

for (...) {
    var emitter = ...;
    document.write(emitter); //no return here
}

并且：

document.write('<table border:1><tr><th>fahrenheit</th><th>celsius</th></tr></p><br>')
//No document.write here
generateFahrenheit2CelsiusHTMLTable(30, 230, 10);
document.write('</br>');
document.write('</table>')
document.write('</p>')

请注意，第一个document.write将擦除任何已存在的html。因此，只应用于测试目的。如果要保留原始HTML，则应将innerHTML用于要将表插入的元素。

for循环不使用多个document.write＆＃39; s

2 个答案: