Question

所以我有这个任务，我们建立在我们每周一点一点创建的网站上。本周我必须编写一些javascript代码，其功能是在数组中显示请求的结果数。请求的数字输入表单文本输入。说明如下：

一个。创建一个输入，作为提示用户的句子的空白填充输入他们想要看到的工作职责的数量。

湾创建一个按钮，在单击时调用函数（在下一步中创建的函数）

℃。创建一个获取用户输入并将值赋给变量的函数。

d。创建一个至少包含五个工作职责的数组。

即创建一个新变量并将其设置为等于输入值减去1

F。创建一个while循环，该循环在变量（表示我们要打印的索引值）大于或等于最小数组值时运行。

克。在while循环中有两件事情发生：让页面中某些元素的innerHTML替换为与我们想要打印的索引号对应的数组值。您可以使用arrayname [indexnumber]格式指定数组值。还有索引从中减去一个倒数

此时你的功能应该运行，但它无法正常工作。仅打印最后一个索引处的数组值。要解决这个问题，我们需要连接循环的结果。

我。在循环外创建一个新变量，并将其设置为等于空白

您可以将其设置为“”

II。在循环中，使此变量等于自身加上我们想要打印的数组值。

III。现在将innerHTML更改为等于此变量。

到目前为止，我还没有这样做：

function showDuties() {
  var numDuties = document.getElementById('pfJobs').value;

  var pfDuties = ["Auditing", "Close out registers", "Clean free weights",
    "Sign up new members", "File paperwork"
  ]

  var i = numDuties - 1

  while (i >= 0) {
    document.getElementById('pfj').innerHTML = pfDuties[0, 1, 2, 3, 4];
    i--;
  }

<form>
  <input type="submit" value="Click here"    onclick="showDuties()"> 
    to see my top 
	<input type="text" id="pfJobs" />
	  job duties here.
	<p id = "pfj">
	</p>
</form>

最终做的是用HTML中的元素替换我的HTML中段落标记中的文本，但它只在屏幕上闪烁半秒然后消失。

如果我的格式不正确，我很抱歉这是我第一次使用此网站。任何帮助将不胜感激。

Answer 1

您可以使用slice获取数组的一部分副本，并join将这些数组值合并为一个字符串

document.querySelector('button').addEventListener('click', showDuties);

function showDuties() {
  var numDuties = document.getElementById('pfJobs').value;

  var pfDuties = ["Auditing", "Close out registers", "Clean free weights", "Sign up new members", "File paperwork"]

  document.getElementById('pfj').innerHTML = pfDuties.slice(0,numDuties).join(", ");
}

<input type="number" id="pfJobs" value="0" max="5">
<button>show jobs</button>

<p id="pfj"></p>

Answer 2

这是一种做法，但取决于你想要做什么，其他方法可能会更好。关键是要记住DOM是动态的，你可以从中添加和减去节点。

function showDuties() {
  document.getElementById('pj').innerHTML='';
  var numDuties = document.getElementById('pfJobs').value;
  
  var pfDuties = ["Auditing", "Close out registers", "Clean free weights",
    "Sign up new members", "File paperwork"]  
  
    // Create the list element:
    var list = document.createElement('ul');

    for(var i = 0; i < numDuties; i++) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(pfDuties[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
   

// Add the contents 
document.getElementById('pj').appendChild(list);
}

<!-- Add HTML Here -->
<div id='pj'></div>
<input id='pfJobs' onchange='showDuties()' />

Answer 3

您可以添加一个模仿表单提交的点击处理程序，而不会增加麻烦。然后使用document.getElementById

从输入中捕获您的值

然后在数组上使用slice或ES6 spread，因为这两个方法不会改变原始数组。

我还添加了一个检查，指出你的索引永远不会超过数组的长度。

document.getElementById('submit').addEventListener('click', myFunction);

function myFunction() {
let pfDuties = ["Auditing", "Close out registers", "Clean free weights",
  "Sign up new members", "File paperwork"
  ];
  let index = document.getElementById('input').value;
  if (index > pfDuties.length) {
    document.getElementById('pfj').innerText = 'Value is greater than the number of duties';
    return;
  }
  // slice
  let result = pfDuties.slice(0, index).concat(pfDuties.slice(index + 1));
  // spread
  let result2 = [...pfDuties.slice(0, index), ...pfDuties.slice(index + 1)];
  // you can return either array here just did both to show example
  document.getElementById('pfj').innerHTML = result.join('<br>');
}

Value<br>
<input type="text" id="input">
<br><br>
<button id="submit">Submit</button>
<p id="pfj"></p>

使用while循环打印从数组中选择结果

3 个答案: