Question

如何根据输入字段中输入的数字乘以字符串，即“输入名称”，并根据输出结果创建垂直编号列表。任何建议都很好！

示例：

你好名字
你好名字！
你好名字
你好名字！
你好名字

等

我尝试了几件事。循环似乎是合乎逻辑的答案，但是我不确定如何实现它。我仍在学习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();
    });

Answer 1

您可以使用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);
});

Answer 2

如果您需要逐行（垂直）打印，则必须使用符号“ \ n”，这将创建新行。我已经更改了您的示例代码，请参见下文

function displaymessages(name, index) {      

    helloMessage.innerText += index + " " + "Hello " + name + "!\n";          

    showMessage();
}

 let helloButton = document.getElementById("hello-button");
 helloButton.addEventListener('click', function () {
    let firstNameText = document.getElementById("first-name-text");
    helloMessage.innerText = "";
    var numberTimes = parseInt(nTimesText.value)

    for (var i = 0; i < numberTimes ; i++) {
        displaymessages(firstNameText.value, (i + 1));
    }           
 });

您如何垂直列出字符串输出并对其进行相应编号？

2 个答案: