Jump to content

onmouseover not working


etsted

Recommended Posts

why wont onmouseover work?

I am trying to make a function so that when a specific titel is hovered over that titels name wil be put inside another div


function pick_this(to_pick){    document.getElementById("suggested_query").innerHTML = to_pick;    } var ajax = ajaxObj("GET", "suggested_query.php?q="+str+"&type="+type);        ajax.onreadystatechange = function() {                if(ajaxReturn(ajax) == true) {          document.getElementById("suggested_query").style.height = "145px";                    var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|");          //document.getElementById("suggested_query").innerHTML= suggested_titels[0];          for(var i =0; i< suggested_titels.length; i++)          {              document.getElementById("suggested_query").innerHTML+= "<span onmouseover='pick_this(this)'>" + suggested_titels[i] + "</span>";          }                           }    }
Edited by etsted
Link to comment
Share on other sites

Don't use innerHTML to create other html elements into a page. Use the intended method of document.createElement() and appendChild() to create and add elements to a page. Also your onmouseover handler was retrieving an Element object, not a string of the title so your handler wouldn't work even if you were adding elements correctly.

 

Try this code:

var sQ = document.getElementById("suggested_query");var ajax = ajaxObj("GET", "suggested_query.php?q="+str+"&type="+type);ajax.onreadystatechange = function() {             if(ajaxReturn(ajax) == true) {          sQ.style.height = "145px";                    var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|");                    for(var i =0; i< suggested_titels.length; i++)          {               var mySpan = document.createElement("span");               mySpan.onmouseover = function(){                    sQ.innerHTML = this.title               };               mySpan.title = mySpan.innerHTML = suggested_titels[i];               sQ.appendChild(mySpan);          }                        }};
Link to comment
Share on other sites

when i try to run this code console.log says showMore is not defined

function showMore(str){var sQ = document.getElementById("suggested_query");    var type = document.getElementById("mySelect").value;    if (str.length==0)      {           sQ.style.height = "0px";          sQ.innerHTML="";          return;      }        var ajax = ajaxObj("GET", "suggested_query.php?q="+str+"&type="+type);        ajax.onreadystatechange = function() {                if(ajaxReturn(ajax) == true) {          sQ.style.height = "145px";                    var suggested_titels = ajax.responseText.split("S_E_C_R_E_T__S_I_G_N__!_|_!_|");                    var nr1 = "";          for(var i =0;i < suggested_titels.length; i++){              nr1 .= "<span>"+ suggested_titels[i] +"</span>";          }                 }    }          ajax.send();}
Link to comment
Share on other sites

if i were to take away that for loop and write something like this: document.getElementById("suggested_query").innerHTML = suggested_titels[0], then it works.

Btw the showMore is called further down;

Search: <input type="text" name="s" size='70' id='search' onkeyup="showMore(this.value)" autocomplete="off"                                value="<?php if(isset($_GET['s'])){echo trim($_GET['s']);}?>">

Inside a form

and under the form is this:

<div id="suggested_query"></div>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...