1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: JavaScript - getting it to work with innerHtml

Discussion in 'Software Development' started by csatennis, Jan 1, 2014.

Thread Status:
Not open for further replies.
Advertisement
  1. csatennis

    csatennis Thread Starter

    Joined:
    Mar 3, 2007
    Messages:
    410
    Anyone know why this isn't working? it is trying to use innerHtml to create a dropdown box.

    <html>
    <head>
    <script>
    function changeLink(link)
    {
    //alert("test");
    var spanid=document.getElementById(link);
    alert(spanid);
    var temptext=spanid.innerText;
    //alert(temptext);
    if(!(temptext>" ")) {
    temptext="";
    }
    var sInfo = "<select id='cars'>";
    sInfo = sInfo + "<option value='volvo'>Volvo</option>";
    sInfo = sInfo + "<option value='saab'>Saab</option>";
    sInfo = sInfo + "<option value='mercedes'>Mercedes</option>";
    sInfo = sInfo + "<option value='audi'>Audi</option>";
    sInfo = sInfo + "</select>";
    spanid.innerText = "";
    //alert(1);
    document.getElementById(link).innerHTML = sInfo;
    //alert(2);
    var field=document.getElementById("cars");
    var soptions=field.options;
    for(i=0;i<soptions.length;i++){
    //alert(soptions.value + "xx");
    if(soptions.text==temptext){
    soptions.selected=true;}
    }
    }
    </script>
    </head>
    <body>
    <span id="xx" onClick="changeLink('xx')"> click


    </span>

    </body>
    </html>
     
  2. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    What's going wrong?
    It makes a drop down in my tests.
     
  3. csatennis

    csatennis Thread Starter

    Joined:
    Mar 3, 2007
    Messages:
    410
    I use it in firefox and chrome and it drops down, but doesn't save your selection.

    bob
     
  4. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    Ah, that's because it keeps re-creating the drop-down every time you click on it.
    Why not remove the event handler after that first time, using
    Code:
    spanid.onclick = null;
     
  5. csatennis

    csatennis Thread Starter

    Joined:
    Mar 3, 2007
    Messages:
    410
    Ok, that helps. But I also get some kind of alert. I attached a screen print here.

    And here is the changed code:

    <html>
    <head>
    <script>
    function changeLink(link)
    {
    //alert("test");
    var spanid=document.getElementById(link);
    alert(spanid);
    var temptext=spanid.innerText;
    //alert(temptext);
    if(!(temptext>" ")) {
    temptext="";
    }

    var sInfo = "<select id='link'>";

    spanid.onclick = null;

    sInfo = sInfo + "<option value='volvo'>Volvo</option>";
    sInfo = sInfo + "<option value='saab'>Saab</option>";
    sInfo = sInfo + "<option value='mercedes'>Mercedes</option>";
    sInfo = sInfo + "<option value='audi'>Audi</option>";
    sInfo = sInfo + "</select>";
    //spanid.innerText = "";
    //alert(1);
    document.getElementById("xx").innerHTML = sInfo;
    //alert(2);
    var field=document.getElementById(link);
    var soptions=field.options;
    for(i=0;i<soptions.length;i++){
    //alert(soptions.value + "xx");
    if(soptions.text==temptext){
    soptions.selected=true;}
    }

    }
    </script>
    </head>
    <body>
    <span id="xx" onClick="changeLink('xx')"> click


    </span>

    <span id="cars">
    </span>


    </body>
    </html>
     

    Attached Files:

  6. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    That's because of your line alert(spanid);.
    Since spanid is a HTML object, not a javascript one, javascript doesn't know how to interpret it and just gives its basic type.

    Also, you'll probably want to get rid of the section
    Code:
     var field=document.getElementById(link);
    var soptions=field.options;
    for(i=0;i<soptions.length;i++){
      //alert(soptions[i].value + "xx");
      if(soptions[i].text==temptext){
       soptions[i].selected=true;}
       } 
    That looks to me like an attempt to fix your previous problem that hasn't worked, and now it's just sitting there waiting for a chance to make a mess further down the line.
     
  7. csatennis

    csatennis Thread Starter

    Joined:
    Mar 3, 2007
    Messages:
    410
    great ... that does it! thanx!
     
  8. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    You're welcome.
     
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1116494

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice