Fatal编程技术网
  • javascript/
  • Javascript 随机报价赢得'；t显示

Javascript 随机报价赢得'；t显示

javascript jquery

Javascript 随机报价赢得'；t显示,javascript,jquery,Javascript,Jquery,我的随机报价器不工作（每次点击按钮都会显示随机报价）。发生什么事？我的同事们也被难住了。它在javascript形式下工作，但在将所有语法转换为jquery时不工作 HTML在这里： <!DOCTYPE HTML> <html lang="en" manifest="quoter.manifest"> <head> <meta charset="UTF-8" lang="en" /> <meta na

我的随机报价器不工作（每次点击按钮都会显示随机报价）。发生什么事？我的同事们也被难住了。它在javascript形式下工作，但在将所有语法转换为jquery时不工作

HTML在这里：

<!DOCTYPE HTML>
<html lang="en" manifest="quoter.manifest">
    <head>

        <meta charset="UTF-8" lang="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <title>Quoter</title>

        <script src="jquery-2.1.1.min.js"></script>
        <script src="script.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="main.css" media="screen"/>

    </head>

    <body>

        <section>

            <header>
                <div id="padmeheader"><h1>Bennett's Quoter</h1></div>
                <nav></nav>
            </header>

            <main>
            <div id="centerme">
                <button id="submit" type="button">Get new quote!</button>
                <span id="quoteText"></span> 
                <span id="authorText"></span> 
            </div>
            </main>

            <footer>
                &copy; 2014 
            </footer>

        </section>

    </body>

</html>
CSS在这里：

a:link {
    text-decoration: none !important;
    color:black !important;
}

a:visited {
    text-decoration: none !important;
    color:red !important;
}

a:active {
    text-decoration: none !important;
    color:green !important;
}

a:hover {
    text-decoration: none !important;
    color:blue !important;
    background-color:white !important;
}

body {
    margin: 0px auto;
    /*margin:1em 1em 1em 1em;*/
    text-align:center;
    background-color:white;
    font-weight:normal;
    font-size:12px;
    font-family: verdana;
    color:black;    
}

footer {
    bottom:20px;
    width:100%;
    margin-top:200px;
    position:absolute;
}

#quoteText {
    font-style:italic;
    font-size:3em;
    color:black;
    width:600px;
    background-color:white;
    display:inline-block;
    margin-bottom:30px;
    margin-top:20px;
} 

#authorText {
    font-style:bold;
    font-size:1.5em;
    color:grey;
    width:600px;
    height:50px;
    display:inline-block;
} 

#centerme {
    text-align:center;
    margin:0px auto;
    display:inline-block;
    width:600px;
}

#submit {
    width:100px;
    height:100px;
    display:inline-block;
    margin-bottom:20px;
    margin-top:10px;
    font-size:1.3em;
}

#padmeheader {
    height:50px;
    background-color:black;
    margin-bottom:50px;
}

h1 {
    color:white;
    text-align:center;
    margin: 0px auto;
    margin-bottom:50px;
    width:100%;
    background-color:black;
    padding-top: 13px;
}
应该是

$("#submitButton");
$("#quoteText"); //assign var to quoteText id contents
$("#authorText"); //assign var to authorText id contents
ID选择器需要在ID之前有一个hashtag，否则它会查找quoteText类型的元素。问题就在这里：

var quoteSpan     = $("quoteText"); //assign var to quoteText id contents
var authorSpan    = $("authorText"); //assign var to authorText id contents
var submitButton  = $('submit'); //assign var to button
您正在选择名为
quoteText
、
authorText
和
submit
的DOM节点，而您需要的是
id
：

var quoteSpan     = $("#quoteText"); //assign var to quoteText id contents
var authorSpan    = $("#authorText"); //assign var to authorText id contents
var submitButton  = $('#submit'); //assign var to button
请查看所有

使用#for ID和正确使用选择器。上课

var quoteSpan     = $("#quoteText"); //assign var to quoteText id contents
var authorSpan    = $("#authorText"); //assign var to authorText id contents
var submitButton  = $('#submit'); //assign var to button
在jquery中按ID选择项时，需要使用“#”。例如，它应该是：

var submitButton = $("#submit")
它对

使用标准CSS语法许多答案，例如@Kith，都指出您的选择器不正确，但您也试图使用未定义的变量访问
引号
数组

var oldQuoteIndex = -1;
var newQuoteIndex;

var quotes = ...

//newQuoteIndex is undefined here.
quoteSpan.html(quotes[newQuoteIndex].text); //make HTML's quoteText random quote
authorSpan.html(quotes[newQuoteIndex].author);
因为您正在调用
nextQuote（）在doc ready函数的末尾，这两行是多余的，应该删除
 如果它在javascript中工作，为什么要在jQuery中转换它？@Karl AndréGagnon因为学习？newQuoteIndex=Math.floor（Math.random（）*quotes.length）；它应该在那里定义。编辑：无所谓，你完全正确。@kith但这是在首次使用newQuoteIndex后定义的函数中

var submitButton = $("#submit")



var oldQuoteIndex = -1;
var newQuoteIndex;

var quotes = ...

//newQuoteIndex is undefined here.
quoteSpan.html(quotes[newQuoteIndex].text); //make HTML's quoteText random quote
authorSpan.html(quotes[newQuoteIndex].author);