Question

我在搜索中发现了几个类似的问题，但无法完全适应我的解决方案。我正在创建一个应用程序，当您单击该链接时，它会从数组中返回一个随机事实。我有点转过身来，现在有点失落。这是我的JS：

var facts = [
'fact 1',
'fact 2',
'fact 3',
'fact 4',
'fact 5'
];

function writeFact(facts) {
    var htmlString = '';
    document.getElementById('fact').innerHTML = htmlString;
    htmlString += '<h2>Did you know...</h2> ';
    htmlString += '<div id=\'fact\'>' + facts + '?</div>';
    document.getElementById('facts').innerHTML = htmlString;
    setTimeout(showLink(), 2500);
}

function getRandomFact() {
    return Facts[Math.floor(Math.random()) * facts.length];
}

function getFactClicked(getRandomFact) {
    document.getElementById('writeFact').style.visibility = 'hidden';
    writeFact(getRandomFact());
}

function showLink() {
    document.getElementById('writeFact').style.visibility = 'visible';
}

window.onload = function() {
    writeFact(getRandomFact());
    setTimeout(showLink(), 2500);
};

对于我的HTML和CSS，您可以check it out here。

到目前为止，我无法让onClick（）打印出新的事实。任何帮助将不胜感激。

Answer 1

抱歉，更改了id以使其更易于理解。

<style>
body {
    width:80%;
    margin:auto;
}
h1 {
    font-family: Arial, Verdana, sans-serif;
}

h2 {
    font-family: Arial, Verdana, sans-serif;
    font-style: italic;
    font-weight: normal;
}

#theFact {
    width:25%;
    margin-bottom:2em;
}

#factMe {
    display: none;
    /*visibility: hidden;*/
}
</style>
    <body>



<h1>Some Factoids for Ye!</h1>
<div id="theFact"></div>

    <a href="#" id='factMe' onclick="getFactClicked();">Click here to get a new fact!</a>




        <script type="text/javascript">
var facts = [
    '42 is the meaning of life, the universe and everything', '8 + 8 is 16',
    'The first \'C\' in MCC stands for Community', 'If you have 3 quarters, 4 dimes, ' +
        'and 4 pennies, you have $1.19. You also have the largest amount of money in coins ' +
        'without being able to make change for a dollar',
    'The numbers \'172\' can be found on the back of the U.S. $5 dollar bill in the bushes ' +
        'at the base of the Lincoln Memorial',
    'President Kennedy was the fastest random speaker in the world with upwards of ' +
        '350 words per minute',
    'In the average lifetime, a person will walk the equivalent of 5 times around the equator',
    'Odontophobia is the fear of teeth',
    'The 57 on Heinz ketchup bottles represents the number of varieties of ' +
        'pickles the company once had',
    'Cats sleep 16 to 18 hours per day',
    'Karoke means "empty orchestra" in Japanese',
    'When you die your hair still grows for a couple of months',
    'Isaac Asimov is the only author to have a book in every Dewey-decimal category',
    'The Neanderthal\'s brain was bigger than yours is',
    'On the new hundred dollar bill the time on the clock tower of Independence Hall is 4:10',
    'The sound of E.T. walking was made by someone squishing her hands in jelly'
];

function writeFact(facts) {
    //console.log(facts);
    var htmlString = '';
    // document.getElementById('theFact').innerHTML = htmlString;
    htmlString += '<h2>Did you know...</h2> ';
    htmlString += '<div id=\'fact\'>' + facts + '?</div>';
    document.getElementById('theFact').innerHTML = htmlString;
    setTimeout(showLink, 2500);
}

function getRandomFact() {
    return facts[Math.floor(Math.random() * facts.length)];
}

function getFactClicked() {
    document.getElementById('factMe').style.display = 'none';
    writeFact(getRandomFact());
}

function showLink() {
    document.getElementById('factMe').style.display = 'block';
}

window.onload = function() {
    writeFact(getRandomFact());
    setTimeout(showLink, 2500);
};


        </script>
    </body>

从数组中拉出随机字符串的JavaScript应用程序

1 个答案: