0
"Generate quotote"ボタンをクリックすると現在の見積もりが削除されます。著者はJSONファイル上にある新しい引用文と著者に置き換えます。 JSONファイルが配列にあります。私はボタンをクリックするたびに次の見積もりが表示されるようにしたい。理想的には、JSON配列内で使用可能な引用符をランダム化して提供したいと思います。ボタンをクリックしてJavaScriptを使用してJSONファイル配列にあるデータで置き換えると、htmlデータやテキストを削除する方法
現在、ボタンをクリックすると最後の見積もりが表示され、+1のクリックごとに同じ見積もりが表示されます。これは、配列が最後のアイテムをピックアップして再度見積もりを出力するためです。 一時的ですが、もっと良い回避策があると思います。複数のJSONファイルをアップロードし、URL内のページ数を '..quotes - ' + pagecount + '.sjon'から変更してすべての引用符を取得します。
HTML:
<!DOCTYPE html>
<html>
<head>
<!--Javascript for quote generator-->
<link rel="stylesheet" type="text/css" href="css/quoteStyles.css">
</head>
<body>
<div id="quoteBox" class="quote-text">
<span id="text"></span>
<p id="quotePara">
</p>
<span id="text2"></span>
</div>
<div class="quote-author">
- <span id="author"></span>
</div>
<div class="button-links">
<button id="getQuote"class="btn btn-primary">Get Quote</button>
</div>
</body>
<script src="test.js"></script>
<script src="http://rogerperez.us/quotes.json"></script>
Javascriptを
JavaScript:
var pageCount = 1;
var i=0;
var quotePara = document.getElementById("quotePara");
var getQuote = document.getElementById("getQuote");
// Request to get json data where the quotes are located
getQuote.addEventListener("click", function() {
var ourRequest= new XMLHttpRequest();
ourRequest.open('GET','http://rogerperez.us/quotes-1.json');
ourRequest.onload= function() {
if (ourRequest.status>= 200 && ourRequest.status<400){
var ourData= JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else{
console.log("Connection Error, Please try again.")
}
};
ourRequest.send();
pageCount++;
if (pageCount>6){
getQuote.classList.add('hide-me');
}
});
console.log(i);
function renderHTML(data){
var htmlString="";
var htmlAuthor="";
// for (j=0;j<data.length;j++){
// remove
// }
for (i=0;i<data.length; i++){
console.log("first",i);
htmlString=data[i].quote;
htmlAuthor=data[i].author;
console.log(i);
}
quotePara.insertAdjacentHTML('beforeend', htmlString);
author.insertAdjacentHTML('beforeend', htmlAuthor);
}
JSON
[
{"quote": "Success is not final; failure is not fatal: It is the courage to
continue that counts.",
"author": "Winston S. Churchill"},
{"quote":"Don't be afraid to give up the good to go for the great.",
"author":"John D. Rockefeller"},
{"quote":"I find that the harder I work, the more luck I seem to have.",
"author":"Thomas Jefferson"},
{"quote":"Try not to become a man of success. Rather become a man of value.",
"author":"Albert Einstein"},
{"quote":"o one thing every day that scares you.",
"author":"Anonymous"},
{"quote":"If you really look closely, most overnight successes took a long
time.",
"author":"Steve Jobs"},
{"quote":"The real test is not whether you avoid this failure, because you won't. It's whether you let it harden or shame you into inaction, or whether you learn from it; whether you choose to persevere.",
"author":"Barack Obama"},
{"quote":"The successful warrior is the average man, with laser-like focus.",
"author":"Bruce Lee"},
{"quote":"If you really want to do something, you'll find a way. If you don't, you'll find an excuse.",
"author":"Jim Rohn"},
{"quote":"Be the type of person that when your feet hit the floor in the
morning the devil says,aww shit.. they are up",
"author":"Dwayne (The Rock) Johnson"},
{"quote":"Many of life's failures are people who did not realize how close
they were to success when they gave up",
"author":"Thomas Edison"},
{"quote":"Opportunities don't happen. You create them",
"author":"Chris Grosser"},
{"quote":"I would rather risk wearing out than rusting out.",
"author":"Theodore Roosevelt"},
{"quote":"When you play, play hard; when you work, don't play at all.",
"author":"Theodore Roosevelt"}
]
私は試しにそれ今夜を与え、あなたに戻って取得します場合は、単にあなたが機能
renderHTMLを呼び出すことができます。お手伝いをしていただきありがとうございます。 – GauchoRogerそれはうまくいった。ページ数を減らして0から開始し、固定数ではなくdata.lengthを使用できるようにしました。 – GauchoRoger
よろしくお願いします！ハッピーコーディング。 –