Question

我有一个简单的程序，存储男性，女性和男女皆宜的名字，你点击一个按钮，一个随机选择并显示在页面上。

我不断在数据库中添加新名称，所以我想要一个简单的javascript来记录每个单独数据库（男性，女性和男女皆宜）中存储的名称数量，并以文本形式显示＆＃34;那里目前是###男性名称，###女性名称和###男女皆宜的名字。＆＃34;

该网站位于：http://surrealmayhem.com/stuff/name_generator.html

我在网上找到的唯一内容是使用

的console.log

    var = randomOtherNames.length;

但我需要它通过span或粗体标签和ID名称在html中显示。

我知道这将是一件事

    document.getElementById("male_num");

但通过了，我不知道如何把它们放在一起并让它显示在页面上。我仍然是javascript的新手，我不完全理解当你点击按钮时显示的文本是如何工作的。我觉得我可以重用我已经拥有的脚本，但我可以使用一些帮助。

<button Onclick="click" id="other_button" style="font-size: 25px;"> Click Me </button>
<br /><br />
<b id="other_name" style="font-size: 25px;"></b>


<script type="text/javascript" charset="utf-8">
                            var other_string = randomOtherNames.length;
              var randomOtherNames = [
"Jamie",
"Shannon",
"Kelly",
"Aeron",
"Shain",
"Kasey",
"Jordan",
"Jesse / Jessie",
"Sage",
"Evan",
"Alex",
"Stephen",
"Renee",
"Tracy",
"Avery",
"Dallas",
"Denver",
"Taylor",
"Elliot",
"Terry",
"Jeri",
"Percy",
"Raven",
"Jean",
"Jan",
"Christian",
"Adrian",
"Jude",
"Quinn",
"Piper",
"Harper",
"Payton",
"Walker",
"Cameron",
"Terran",
"Riley",
"River",
"Andren",
"Camden",
"Jiles",
"Pax",
"Rayne",
"Skylar",
"Kalin",
"Justice",
"July",
"Kensington",
"Kendall",
"Grey",
"Genesis",
"Hollis",
"Keagan",
"Kai",
"Bristol",
"Angel",
"Azure",
"Bailey",
"Carmen",
"Echo",
"Embry",
"Ember",
"Gale",
"Freedom",
"Haven",
"Kyler",
"Kylan",
"Miracle",
"Myka",
"Peace",
"Zene",
"Winter",
"Xannon",
"Valor",
"Urban",
"Valentine",
"Storm",
"Tai",
"Shae",
"Sailor",
"Red",
"Reign",
"Ramsey",
"Reed",
"Reggie",
"Ocean",
"Nalo",
"Neo",
"London",
"Ash",
"Brook",
"Crane",
"Crimson",
"Corin",
"Cresant",
"Indigo",
"Jazz",
"Cassidy",
"Kin",
"Monroe",
"Moral",
"Poet",
"Ryder",
"Saxton",
"Sidney",
"Tanner",
"Torrance",
"Torrin",
"Lex / Lexi",
"Zane",
"Zanas",
"Ari",
"Brynn",
"Greer",
"Kennedy",
"Lyle",
"Lonnie",
"Rune",
"Rylan",
"Sparrow",
"Sunny",
"Emerald",
"Cloud",
"Star",
"Kensey",



              ];



              var other_div = document.getElementById("other_name");

              document.getElementById("other_button").addEventListener("click", function() {
                    randomIndex = Math.ceil((Math.random()*randomOtherNames.length-1));
                    newText = randomOtherNames[randomIndex];
                    other_div.innerHTML = newText;
              });
          </script>

Answer 1

在顶部，添加一个用于显示计数的元素。然后在您的脚本中，为新元素设置innerHTML：

var randomOtherNames = ["Jamie", "Shannon", "Kelly", "Aeron", "Shain", "Kasey", "Jordan", "Jesse / Jessie", "Sage", "Evan", "Alex", "Stephen", "Renee", "Tracy", "Avery", "Dallas", "Denver", "Taylor", "Elliot", "Terry", "Jeri", "Percy", "Raven", "Jean", "Jan", "Christian", "Adrian", "Jude", "Quinn", "Piper", "Harper", "Payton", "Walker", "Cameron", "Terran", "Riley", "River", "Andren", "Camden", "Jiles", "Pax", "Rayne", "Skylar", "Kalin", "Justice", "July", "Kensington", "Kendall", "Grey", "Genesis", "Hollis", "Keagan", "Kai", "Bristol", "Angel", "Azure", "Bailey", "Carmen", "Echo", "Embry", "Ember", "Gale", "Freedom", "Haven", "Kyler", "Kylan", "Miracle", "Myka", "Peace", "Zene", "Winter", "Xannon", "Valor", "Urban", "Valentine", "Storm", "Tai", "Shae", "Sailor", "Red", "Reign", "Ramsey", "Reed", "Reggie", "Ocean", "Nalo", "Neo", "London", "Ash", "Brook", "Crane", "Crimson", "Corin", "Cresant", "Indigo", "Jazz", "Cassidy", "Kin", "Monroe", "Moral", "Poet", "Ryder", "Saxton", "Sidney", "Tanner", "Torrance", "Torrin", "Lex / Lexi", "Zane", "Zanas", "Ari", "Brynn", "Greer", "Kennedy", "Lyle", "Lonnie", "Rune", "Rylan", "Sparrow", "Sunny", "Emerald", "Cloud", "Star", "Kensey"];


var other_string = randomOtherNames.length;
var other_div = document.getElementById("other_name");
var other_count_div = document.getElementById("other_name_count");

//populate the innerHTML of "other_count_div" on page load:
other_name_count.innerHTML = randomOtherNames.length;

var findName = function() {
        randomIndex = Math.ceil((Math.random() * randomOtherNames.length - 1));
        newText = randomOtherNames[randomIndex];
        other_div.innerHTML = newText;
        other_name_count.innerHTML = randomOtherNames.length;
    };
document.getElementById("other_button").addEventListener("click", findName);

<button Onclick="click" id="other_button" style="font-size: 25px;"> Click Me </button>
<br /><br />
<b id="other_name" style="font-size: 25px;"></b>
<span id="other_name_count"></span>

显示页面上字符串的长度

1 个答案: