javascript - Replacing different text, onClick, to SAME div -


i'm pretty new javascript , have been @ @ awhile, still can't figure out, advice how continue this, appreciated. i've tried place in jsfiddle, not work, when part of code working on computer. i've got first part (#preheat , #pans) want.

javascript:

<script>         $(function () {            $('#preheat').on('click', function () {             $("<p>preheat oven 350°f. prepare 2 9-inch pans spraying baking spray.</p>").appendto('#content');              $("#steps").replacewith('<span id="steps1">allow <span id="verb_1">cool</span> 10 minutes, remove <span id="noun_1">pans </span>and cool completey.</span>');            });   //this part not working         $('#cool').on('click', function () {             $("<p>allow cool 10 minutes, remove pans , cool completely.</p>").appendto('#content');              $("#steps1").replacewith('<span id="verb_2">bake</span><span id="noun_2">chocolate cake</span> 30-35 minutes, until toothpick or cake tester inserted in center comes out clean.');          });           $('#pans').on('click', function () {             $("<p>preheat oven 350°f. prepare 2 9-inch pans spraying baking spray.</p>").appendto('#content');              $("#steps").replacewith('<span id="verb1">distribute</span> cake batter evenly between <span id="noun1">two cake pans.</span>');         });          }); </script> 

html:

    <div id="steps">             <span id="preheat">preheat</span>             <span>oven 350°f. prepare</span>             <span id="pans">two 9-inch pans</span>             <span>by spraying baking spray.</span>         </div>        <div id="content">         <p></p>    </div> 

css:

 #content{     float:right; } 

$('#cool').on('click', function () { 

is not working becauase there not element id cool.

also, if want delegate click event element having id cool do

$(document).on('click',''#cool', function () { // can use valid selector parent element of #cool instead of document 

something jsfiddle need.

updated jsfiddle

side note: @ end of code, you're trying replace #steps not exists more since replaced else earlier. might want use html() function instead of replacewith() in jsfiddle


Comments

Popular posts from this blog

Change the color of an oval at click in Java AWT -

c# - Unity IoC Lifetime per HttpRequest for UserStore -

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -