Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Function - Change innerHTML Help

    Why won't the following work?

    <script type="text/javascript">
    function changePrac(){
    document.getElementById('pracDesc').innerHTML ='test';
    document.prac.src='/uploads/pracs/test.jpg';
    }
    </script>

    If I take out the line that is trying to change the innerHTML it works, as shown below, but I need it to work as show above...

    <script type="text/javascript">
    function changePrac(){
    document.prac.src='/uploads/pracs/test.jpg';
    }
    </script>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    What does the HTML that is referencing look like?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <a href="#" onmouseover="changePrac(); return false;">test</a>

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    That HTML doesn't contain anything for the document.getElementById('pracDesc').i and document.prac to reference and so if that is all the HTML you have then the function can do nothing.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh...you're looking for this:

    <div id="pracDesc">

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it helps, here is the page with the code:

    http://dev.curbing.net/Practitioners/

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    61
    Thanks
    2
    Thanked 1 Time in 1 Post
    Code:
    <script type="text/javascript">
    function changePrac(){
    document.getElementById("pracDesc").innerHTML = "test";
    document.prac.src = "/uploads/pracs/test.jpg";
    }
    </script>
    Couple extra suggestions -
    1. Why use a href when it could just as easily be a span for them to mouse over? You already styled it, so they'll know it's hoverable. Unless of you eventually plan on taking them to a page, then ignore this.

    2. May I suggest using just one changePrac function and sending parameters to it, instead of a new function for each?

    If you wanted to try using parameters, it would look like this
    Code:
    <script type="text/javascript">
    function changePrac(name, image){
    document.getElementById("pracDesc").innerHTML = name;
    document.prac.src = "/uploads/pracs/" + image;
    }
    </script>
    
    <span style="color:#9CCCE3; font-size:9pt; font-weight:bolder; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; letter-spacing:1px" 
    onmouseover="changePrac('Fred Flinstone', 'test.jpg');">
    MOUSE OVER ME</span>

  • #8
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't get it...not working. Check it out at http://dev.curbing.net/Services/.

  • #9
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK...got Services page working, but still can't figure out what is wrong with this page:

    http://dev.curbing.net/Practitioners/

  • #10
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any thoughts?

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    try the error console - it's fairly plain what the problem is


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •