Question

我输入了3个元素，第二个是按钮，第三个是段落。假设段落的字符串很长，但我们希望显示该段落的一部分。

它在我的代码中有效，但是如果我输入一个值，例如100，它将显示该段落的100个字符串，但是在这种情况下，如果我想显示100个以上的字符串，则它将不起作用。 / p>

请在下面找到代码-

<input type="number" id="strinput" name="">
<button id="btn" onclick="submitformstr()">Submit</button>

<article id="totalchars">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nihil minima atque veniam repudiandae harum, consectetur voluptas nam amet fugiat eligendi vitae aliquam eum recusandae voluptatum, sapiente autem ratione. Praesentium totam repellat recusandae ad distinctio voluptas, modi expedita similique voluptate, culpa officiis. Assumenda similique, ipsum nostrum suscipit vero a asperiores maiores qui, sint esse nesciunt laborum consequuntur facere! Voluptatem asperiores, fuga maxime cumque dicta numquam tempora perferendis eos, soluta laboriosam, ad minima quisquam excepturi veniam fugit, reiciendis molestiae. Repudiandae unde fugiat, delectus neque, quam eligendi repellat facilis ipsum nulla mollitia, quos incidunt iusto voluptas ad. Quisquam velit excepturi commodi provident.
</article>

<script>
  function submitformstr() {
    const strn = document.getElementById('strinput');
    const strnval = strn.value;
    console.log(strnval);
    const totalchars = document.getElementById('totalchars').innerText;
    const showchars = totalchars.substring(0, strnval);
    document.getElementById('totalchars').innerText = showchars;
  }
</script>

Answer 1

只需在函数外部定义const totalchars = document.getElementById('totalchars').innerText;。

const totalchars = document.getElementById('totalchars').innerText;
function submitformstr() {
    const strn = document.getElementById('strinput');
    const strnval = strn.value;
    console.log(strnval);
   
    const showchars = totalchars.substring(0, strnval);
    document.getElementById('totalchars').innerText = showchars;
}

<input type="number" id="strinput" name="">
<button id="btn" onclick="submitformstr()">Submit</button>

<article id="totalchars">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nihil minima atque veniam repudiandae harum, consectetur voluptas nam amet fugiat eligendi vitae aliquam eum recusandae voluptatum, sapiente autem ratione. Praesentium totam repellat recusandae ad distinctio voluptas, modi expedita similique voluptate, culpa officiis. Assumenda similique, ipsum nostrum suscipit vero a asperiores maiores qui, sint esse nesciunt laborum consequuntur facere! Voluptatem asperiores, fuga maxime cumque dicta numquam tempora perferendis eos, soluta laboriosam, ad minima quisquam excepturi veniam fugit, reiciendis molestiae. Repudiandae unde fugiat, delectus neque, quam eligendi repellat facilis ipsum nulla mollitia, quos incidunt iusto voluptas ad. Quisquam velit excepturi commodi provident.
</article>

Answer 2

之所以发生这种情况，是因为每次您运行该函数都会覆盖innerHTML，因此在首次调用innerHTML之后最多包含100个字符。您的js函数应类似于

var innerParagraphText = document.getElementById('totalchars');    
function submitformstr() {
    const strn = document.getElementById('strinput');
    const strnval = strn.value;
    console.log(strnval);
    const totalchars = innerParagraphText.innerText;
    const showchars = totalchars.substring(0, strnval);
    document.getElementById('totalchars').innerText = showchars;
}

显示段落字符串的自定义长度

2 个答案: