JavaScript DOM Elements -
i working on jsbin exercise. here link:
http://jsbin.com/sevirufite/1/edit?html,css,js,console,output
i've taken words out of hestext div, split them array, added unique spans each word (word1, word2, word3, etc) , to, upon clicking transform button, able mouseover each word , turn it's background yellow, normal on moving (blurring?) off word. grateful if can teach me...!
yeah, need css accomplish want :hover
rule. (you want clear html after split words).
here's updated jsbin code here, below: http://jsbin.com/muceyimoje/4/
var hestext = document.getelementbyid("hestext"); var transformbtn = document.getelementbyid("transformbutton"); transformbtn.addeventlistener('click', function() { var wordarray = hestext.innertext.split(" "); hestext.innerhtml = ""; (var = 0; < wordarray.length; i++) { var spannode = document.createelement("span"); spannode.appendchild(document.createtextnode(wordarray[i])); hestext.appendchild(spannode); hestext.appendchild(document.createtextnode(' ')); } });
body { background-color: white; } #hestext > span { background-color: white; transition: background-color 0.25s ease-in-out; -webkit-transition: background-color 0.25s ease-in-out; -moz-transition: background-color 0.25s ease-in-out; } /* when hover, change background yellow */ #hestext > span:hover { background-color: yellow; }
<h1>unit 3 project a: jerald dana cole</h1> <p>the div serve input (and output) here: <div id="hestext">it’s time of year when clean out closets, dust off shelves, , spruce floors. once you’ve taken care of dust , dirt, digital cleaning? going through files , computers may seem daunting task, found ways make process painless. </div> <br><br> <input type="button" id="transformbutton" name="transformbutton" value="transform!" />