javascript - 如何垂直列出字符串输出并相应地对其进行编号?

标签 javascript html

如何根据输入字段中输入的数字乘以字符串(即“输入名称”),并根据所述输出创建垂直编号列表。任何建议都会很棒!

示例:

  1. 你好名字
  2. 你好名字!
  3. 你好名字
  4. 你好名字!
  5. 你好名字

等等

我尝试过一些事情。循环似乎是合乎逻辑的答案,但我不确定如何实现它。我仍在学习 javascript 的过程中,所以并不是所有的事情都是立即显而易见的。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width, initial-scale-1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">   

</head>
<body>

    <div>
        <label for="first-name">Frist Name!</label>
        <input type="text" name="first-name-text" id="first-name-text" placeholder="Enter a name">
        <br>
        <br>
        <label for="n-times">Number of times</label>
        <input type="text" name="n-times-text" id="n-times-text" placeholder="Enter a number">
    </div>


    <div>
        <p id="hello-message">Hello World!</p>

    </div>
<br>
    <div>
        <button id="hello-button">Display Hello!</button>
        <button id="reset-button">Reset</button>
    </div>

    <script src="script.js"></script>
</body>






</html>

JavaScript



let firstNameText = document.getElementById("first-name-text");
let helloMessage = document.getElementById("hello-message");

let nTimesText = document.getElementById("n-times-text")



function hideMessage( ) {
    helloMessage.style.display = "none";


}

function showMessage() {
    helloMessage.style.display = "";

}


function displaymessages(name) {





    // let helloMessage = document.getElementById("hello-message")
        helloMessage.innerText = "Hello " + name + "!";





    // let goodbyeMessage = document.getElementById("goodbye-message")
        // goodbyeMessage.innerText = "Goodbye " + name + "!";

        showMessage();
}



hideMessage();

let helloButton = document.getElementById("hello-button");
    helloButton.addEventListener('click', function() {
    let firstNameText = document.getElementById("first-name-text");



        displaymessages(firstNameText.value);
        console.log('first name:' + firstNameText.value);


});

let resetButton = document.getElementById("reset-button");
    resetButton.addEventListener('click', function() {
        firstNameText.value = "";
        nTimesText.value = "";
        hideMessage();
    });

最佳答案

您可以使用String.prototype.repeat()

let helloButton = document.getElementById("hello-button");
 helloButton.addEventListener('click', function() {
    let firstNameText = document.getElementById("first-name-text");
    displaymessages(firstNameText.value.repeat(+nTimesText.value));
    console.log('first name:' + firstNameText.value);
});

关于javascript - 如何垂直列出字符串输出并相应地对其进行编号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55979169/

相关文章:

javascript - 如何避免在更改路由参数值时重新加载 Controller ?

html - 使用路由参数返回不完整且没有 Css 的 View [Laravel 5]

css - 网站div定位,不使用 "top"如何定位div

php - 使用 javascript 和 php 自动通知?

javascript - 用于背景切换的闪烁预加载图像

html - 为什么我的 flexbox 悬停效果在 IE 11 中没有按预期工作?

html - 我如何创建图像以使用 css 选择和取消选择

javascript - 像素深度与颜色深度

javascript - jQuery 从具有 AngularJS 内容的页面加载 #div

javascript - Grails在JavaScript中调用application.config值