Javascript：字符串字符的行数

Question

所以我试图创建一个函数，将第一个输入作为数字，将第二个输入作为字符串。然后该函数应使用第二个输入的字符更改 div 的 innerHTML。例如。如果第一个输入是数字 2，第二个输入是 hello，则 innerHTML 应该更改为：

h
ee

如果第一个是数字 5，其他都一样：

h
ee
lll
llll
ooooo

我知道我必须使用 str.charAT 和可能的 for 循环（可能是任何循环）但似乎无法在我的脑海中将它们拼凑起来。我已经坚持了 6 个小时了，我不知道该怎么做。所以我在这里寻求帮助XD，请帮助我！如果有任何提示，我会很乐意接受，这只是一个随机练习，可以帮助我习惯 js。如果您也愿意提供全部内容，那也很好，我的意思是考虑到我可以从中学习，它比提示更有帮助。

数字不能超过字符串中的字符数。到目前为止，这是我制作的 html 和 javascript。

<html>
<head>
  <script src="q2.js" type="text/javascript"></script>
</head>
<body>
  <div> Input1<input id="input1" type="text"></div>
  <div> Input2<input id="input2" type="text"></div>
  <div> Result<div id="result"></div></div>
  <button onclick="compute()">Compute</button>
</body>
<html>

JAVASCRIPT:

function compute(){
  var n = Number(document.getElementById("input1").value);
  var v = document.getElementById("input2").value;
  var answer = document.getElementById("result");
  var i,j;
answer.innerHTML = "";
if(n){

}else{
  alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
}
if(n>v.length){
  alert("number 1 bigger than word 2");
}

for(i=0;i<n;i++){
for(j=0;)
}

}

Answer 1

这可以满足您的需要，但是它可能使用了一些您不熟悉的数组函数

function compute() {
    var n = Number(document.getElementById("input1").value);
    var v = document.getElementById("input2").value;
    var answer = document.getElementById("result");

    if (!n) {
        alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
    }
    if (n > v.length) {
        alert("number 1 bigger than word 2");
    }
    answer.innerHTML = [].slice.call(v, 0, n).map(function(letter, index) {
        return new Array(index+2).join(letter);
    }).join('<br />');
}

slice - 我们只需要前 n 个字符
map - 对于每个字符，运行回调函数
callback 函数创建一个比当前索引大 2 的空数组（基于 0 的索引）
在字母上加入这个数组 - 产生索引 + 1 个字母
映射数组由<br />
这个结果输出到answer.innerHTML

ES2015 (ES6) 中的 answer.innerHTML 代码将是

   answer.innerHTML = [].slice.call(v, 0, n).map((letter, index) => letter.repeat(index+1)).join('<br />')

Answer 2

使用嵌套 for 循环和 charAt 的答案

function compute() {
    var n = Number(document.getElementById("input1").value);
    var v = document.getElementById("input2").value;
    var answer = document.getElementById("result");
    var i, j, c, s = "";
    if (n) {
    } 
    else {
        alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
    }
    if (n > v.length) {
        alert("number 1 bigger than word 2");
    }
    for (i = 0; i < n; i++) {
        c = v.charAt(i);
        if (i > 0) {
            s += "<br />";
        }
        for (j = 0; j <= i; j++) {
            s += c;
        }
    }
    answer.innerHTML = s;
}

Answer 3

function compute() {
var n = Number(document.getElementById("input1").value);
var v = document.getElementById("input2").value;
var answer = document.getElementById("result");

if (!n) {
    alert("whatever is in input 1 is not a number ya fookin cheeky buggah");
}
if (n > v.length) {
    alert("number 1 bigger than word 2");
}
var res ="";
for(var i=1; i<=v.length; i++){
res = res +"\n"+ Array(i+1).join(v.charAt(i));
}
answer.innerHTML = res;
}

无论谁认为此答案有用或有效或错误，请 post 您发表评论或单击 up/down 箭头。只为进一步提升自己。

Javascript：字符串字符的行数

Javascript: Rows of string characters

html

javascript

string

charat