javascript - JavaScript：如何仅显示一个插入字符串的数组项？

问题描述

大部分代码已从我从该站点更改的主要源代码中更改：NewRetroWave 名称生成器： https ://codepen.io/njmcode/details/JdRaWX

上面的网站及其代码片段利用了 jQuery 库。至于我的项目，我只使用 JavaScript、HTML 和 CSS。

const arrayOne = [one, two, three, four, five,];

上面的代码是将所有项目输出到下面的代码中的数组，当我通过 HTML 按钮函数生成代码时，我只想显示一个项目。

const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];

const arrayOne = ["one", "two", "three", "four", "five"];

const sentenceOne = [`Your generated item is: ${arrayOne}`, `Random Item Generated: ${arrayOne}`, `Generated: ${arrayOne}`];

function randMathFunc(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

const initialize = (function(){

    function randArray(generateArray) {
        return generateArray[randMathFunc(0, generateArray.length - 1)];
    }
    
    function generateItem() {
        var itm1Gen = randMathFunc(1, 1),
        itm1Name = [];

        for (n = 0; n < itm1Gen; n++) {
            var complete = false;
            while (!complete) {
                let newItm1Gen = randArray(items);
                if (itm1Name.indexOf(newItm1Gen) == -1) {

                    itm1Name.push(newItm1Gen);

                    complete = true;

                }

            }

        }

        var itemKey = itm1Name.join( " " );
        return itemKey;

    }

    function displayItem(item){
        document.getElementById( 'itemkeyname' ).innerHTML = item;
    }

    function contentRetriever() {
        let item = generateItem();

        displayItem(item);

    }

    function runProgram() {
        items = sentenceOne;

        contentRetriever();

        document.getElementById( 'generatebutton' ).onclick = function () {

            let item = generateItem();
            displayItem( item );

        }

    }

    return {
        init: runProgram
    }

})();

initialize.init();

html {

    margin: auto;
    padding-top: 255px;
    padding-bottom: 255px;
    padding-right: 55px;
    padding-left: 55px;

}

h3 {
    text-transform: uppercase;
}

head, h1, h3 {

    position: static;
    text-align: center;

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    
    background-color: whitesmoke;
    
}


#itemkeyname {
    
    position: static;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;

}

#contentGenerate, #generatebutton {

    position: static;
    text-align: center;
    font-family: monospace;

}

#generatebutton {

    border-top: 0.5px;
    border-bottom: 0.5px;
    border-style: none;

}

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="snippet.css" />

</head>
<body>

    <div id="wrapped">

            <div id="insideItems">
                <div id="itemkeyname"></div>
            </div>
    
    </div>

    <div id="itemArrayGenerate">
            <button type="button" 
            id="generatebutton" 
            value="generate">Generate</button>
    </div>

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

因为，我的问题似乎含糊不清，请告诉我您希望我上传的内容。

这是输出：编写提示生成器输出

这是我的写作提示生成器的输出，您可以看到它输出整个数组而不是所述数组中的一项。

标签： javascript

javascript - JavaScript：如何仅显示一个插入字符串的数组项？

问题描述

解决方案

推荐阅读