Question

我对javascript很新，我试图在简历网站上列出一定数量的工作职责（由用户输入决定）。例如，我要求用户输入他们想要查看的工作职责的数量，并使用数组和while循环我的任务是显示许多工作职责。但是，当我点击按钮时，注意到正在发生。我根本没有得到任何Web控制台错误。以下是我到目前为止的情况：

<div id="right">
            <p> <b> Byrne Dairy</b><br/>
            QA Lab Technician<br/>
            September 2015 - March 2016<br/><br/><br/>

            <button value="Click" onclick="listDuties()">Click</button> to see my top
                <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/>
            <p id="duties"></p>
            <script type="text/javascript">
            function listDuties() {
            var byrneduties = [     "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ",
                                    "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ",
                                    "Performing the Gerber Method of testing on samples. ",
                                    "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ",
                                    "Interpreting results of bacterial and coliform growth patterns in products. " ];
            var x = byrneduties[0];
            var text = "";
            while (byrneduties[x]) {
            text += byrneduties[x] + "<br>";
            x++;
            document.getElementById('duties').innerHTML = x;
            }
            }
            </script>


        </div>

我被告知尝试从用户输入中减去一个，但我不知道该怎么做。任何帮助都会很棒！

Answer 1

哦，你的代码中有一些错误：

首先，你的while条件不是布尔值（true / false），而是字符串数组的值
在循环中用作索引的var x使用字符串数组的第一个元素初始化，然后递增（string + 1？！）并最终返回到html对象（p）< / LI>

查看以下经过审核的代码，我在上面做了一些小改动：

＆＃13;

function listDuties() {
  var byrneduties = ["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ","Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ","Performing the Gerber Method of testing on samples. ","Responsible for using the Standard Plate Count method of developing colonies of bacteria. ","Interpreting results of bacterial and coliform growth patterns in products. " ];
  
  var n = document.getElementById('byrne_duties').value;
  var x = 0;
  var text = "";
  while (x < n) {
    text += byrneduties[x] + "<br>";
    x++;
  }
  document.getElementById('duties').innerHTML = text;
}

＆＃13;

<div id="right">
    <p> <b> Byrne Dairy</b><br/>
    QA Lab Technician<br/>
    September 2015 - March 2016<br/><br/><br/>

    <button value="Click" onclick="listDuties()">Click</button> to see my top
        <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/>
    <p id="duties"></p>

</div>

＆＃13;

我希望很清楚，再见。

Answer 2

然而，当我点击按钮时，注意到了。我不是得到任何Web控制台错误。

您当前的代码只会显示一个职责，因为它反复覆盖相同的 div 。它甚至没有考虑来自文本框的输入。

试试这个

<div id="right">
  <p> <b> Byrne Dairy</b><br/> QA Lab Technician<br/> September 2015 - March 2016<br/><br/><br/>

    <button value="Click" onclick="listDuties()">Click</button> to see my top
    <input type="text" id="byrne_duties" value="0" /> job duties here:<br/><br/><br/>
    <p id="duties"></p>
    <script type="text/javascript">
      function listDuties() {
        var byrneduties = ["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ",
          "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ",
          "Performing the Gerber Method of testing on samples. ",
          "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ",
          "Interpreting results of bacterial and coliform growth patterns in products. "
        ];
        var numberOfDuties = Number( document.getElementById( "byrne_duties" ).value );
        if ( !isNaN( numberOfDuties ) && numberOfDuties > 0 )
        {
           document.getElementById('duties').innerHTML = byrneduties.slice(0, numberOfDuties).join("<br>");
        }
      }
    </script>


</div>

Answer 3

问题：

var x = byrneduties[0]; // here x is variable which refer to first byrneduties
var text = "";

while (byrneduties[x]) { // here x is index, I think you meant 'i'
        text += byrneduties[x] + "<br>";
        x++;
        document.getElementById('duties').innerHTML = x;

无需循环，只需加入数组

 document.getElementById('duties').innerHTML = byrneduties.join('<br/>');

Answer 4

您可以使用foreach迭代数组，如下例所示：

＆＃13;

<div id="right">
            <p> <b> Byrne Dairy</b><br/>
            QA Lab Technician<br/>
            September 2015 - March 2016<br/><br/><br/>

            <button value="Click" onclick="listDuties()">Click</button> to see my top
                <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/>
            <p id="duties"></p>
            <script type="text/javascript">
            function listDuties() {
            var byrneduties = [     "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ",
                                    "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ",
                                    "Performing the Gerber Method of testing on samples. ",
                                    "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ",
                                    "Interpreting results of bacterial and coliform growth patterns in products. " ];
                                    
            var text = "";
            
            byrneduties.forEach( (duty, i)=>{
              if ( (i+1) > document.getElementById('byrne_duties').value ) {
                return;
              }
              text += (i+1) + ") " + duty + "<br/>"
            });
            
            
            document.getElementById('duties').innerHTML = text;
            }
            </script>


        </div>

＆＃13;

Answer 5

 function listDuties() {
            var byrneduties = [     "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/> ",
                                    "Regularly use of Delta Testing Instruments to measure solids and fat contents of products. ",
                                    "Performing the Gerber Method of testing on samples. ",
                                    "Responsible for using the Standard Plate Count method of developing colonies of bacteria. ",
                                    "Interpreting results of bacterial and coliform growth patterns in products. " ];
            var x = 0;
            var text = "";
                  var input =document.getElementById('byrne_duties').value
            while (x<byrneduties.length && x<input) {
            text += byrneduties[x] + "<br>";
            x++;
            document.getElementById('duties').innerHTML = text;
            }
            }

<div id="right">
            <p> <b> Byrne Dairy</b><br/>
            QA Lab Technician<br/>
            September 2015 - March 2016<br/><br/><br/>

            <button value="Click" onclick="listDuties()">Click</button> to see my top
                <input type="text" id="byrne_duties" value="0"/> job duties here:<br/><br/><br/>
            <p id="duties"></p>



        </div>

试试这个

Answer 6

这是你的错误。

var x = byrneduties[0]; // x is "Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/>"
var text = "";
while (byrneduties[x]) { // byrneduties["Gathering product samples from sanitized silo and tank ports on a timely schedule. <br/>"] returns undefined
    text += byrneduties[x] + "<br>"; 
    x++; // string increment probably returns NaN
    document.getElementById('duties').innerHTML = x; //set inner html to NaN.
}

以下一种方式重写

var x = 0;
var text = "";
while (byrneduties[x]) {
    text += byrneduties[x] + '<br/>';
    x++;
}
document.getElementById('duties').innerHTML = text ;

或使用array.join

var text = byrneduties.join('<br/>');
document.getElementById('duties').innerHTML = text;

Javascript数组和循环

6 个答案: