html - Adding media when javascript button is clicked -
i have created js button generates random facts when clicked. want each string(fact) have media below make fact more interesting , fun.
<script> <!-- arrays -->function getvalue(){ var myarray= new array() myarray[0]="your lungs worth $58,200 each,heart fetch $57,000, , kidneys $91,400,your dna fetch more 9m$,while bone marrow, valuable possession, worth $23 million itself. therefore body market value exactly: $45,618,575.82." myarray[1]="hans langseth man world's longest beard 5.33 m (17 ft 6 in)tripped on long beard. lost balance , fell, breaking neck unexpected accident! died instantaneously." myarray[2]="a sesame street episode (ep. 847) aired on tv in 1976,it scary authorities had pull off due several complaints parents saying children screamed in horror."<!--end-var random = myarray[math.floor(math.random() * myarray.length)];//alert(random); document.getelementbyid("fact button").innerhtml=random;}</script>
html:
<input type="button" id="fact_button" value="fact button" onclick="getvalue();" />
assuming want show media images, instance, 1 way it:
window.onload = () => { const factsarr = [ { image: 'http://via.placeholder.com/350x150', content: "your lungs worth $58,200 each,heart fetch $57,000, , kidneys $91,400,your dna fetch more 9m$,while bone marrow, valuable possession, worth $23 million itself. therefore body market value exactly: $45,618,575.82." }, { image: 'http://via.placeholder.com/200x140', content: "hans langseth man world's longest beard 5.33 m (17 ft 6 in)tripped on long beard. lost balance , fell, breaking neck unexpected accident! died instantaneously." }, { image: 'http://via.placeholder.com/200x100', content: "a sesame street episode (ep. 847) aired on tv in 1976,it scary authorities had pull off due several complaints parents saying children screamed in horror." } ]; document.getelementbyid('generate-btn').addeventlistener('click', () => { const idx = math.floor(math.random() * factsarr.length); document.getelementbyid('random-fact-content').innerhtml = factsarr[idx].content; document.getelementbyid('random-fact-image').setattribute('src', factsarr[idx].image) }) }
<button id="generate-btn">generate random fact</button> <div id="random-fact-content"></div> <img id="random-fact-image"></img>
Comments
Post a Comment