Как мога да създам генератор на javascript изречения (или абзаци)?
Създадох генератор, който генерира една оферта наведнъж, когато щракнете върху бутон. Цитатът се показва в текстово поле в 2 полета.
Но проблемът ми е, че може да показва само един цитат наведнъж. Искам да мога да смесвам няколко полуфрази, за да направя абзац.
(ie.)
| Колата | е синя. | Колата | е бърз. |
и друг резултат би бил:
|Колата | е зелено. | Колата | е бързо.|
- това, което е между "|" са различните резултати.
P.s. Също така искам всичко да бъде в едно текстово поле и генерирано чрез щракване на бутон. Направих малко кодиране. Искам да го променя, за да направя възможен генератор на параграфи.
Оригинален код:
CSS
<style>
div#box{
height : 330px;
width : 450px;
background-color : teal;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
margin : 0px auto;}
div#box2{
height : 300px;
width : 430px;
background-color : brown;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
margin : 0px auto;
margin-top: 15px;}
div#boxTitle{
height : 60px;
width : 390px;
background-color : olive;
color : teal;
font-family : times new roman;
font-size : 15pt;
letter-spacing : 1px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : bold;
text-transform : uppercase;
text-align : center;
margin : 0px auto;
margin-top : 13px;}
textarea{
height : 200px;
width : 390px;
background-color : olive;
color : black;
font-family : arial new, cursive, serif;
font-size : 11pt;
letter-spacing : 3px;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : italic;
text-align : center;
margin-left : 5%;
margin-right : 5%;
margin-top : 20px;}
.button{
height : 40px;
width : 175px;
background-color : teal;
color : #bbb;
font-family : arial new;
font-size : 12pt;
border : 1px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius : 10px;
border-bottom-right-radius: 10px;
text-decoration : bold;
text-align : center;
margin-left: 50%;}
</style>
Javascript
<script type="text/javascript">
var Quotes = new Array();
Quotes[0]="your first quote.";
Quotes[1]="your second quote. ";
Quotes[2]="your third quote. ";
function getQuote(){ var seed = Math.floor(Math.random() *
Quotes.length); return Quotes[seed]; }
</script>
HTML
<div id="box">
<div id="box2">
<div id="boxTitle"><br>generator title</div>
<textarea id="quoteBody"></textarea>
</div></div>
<br><br>
<input type="button" class="button" value="Get a new quote" onclick="document. getElementById('quoteBody'). innerHTML = getQuote();" />