etsted Posted September 10, 2014 Share Posted September 10, 2014 (edited) 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 September 10, 2014 by etsted Link to comment Share on other sites More sharing options...
justsomeguy Posted September 10, 2014 Share Posted September 10, 2014 Using innerHTML to add content doesn't execute Javascript. You could do that by creating a new span element, attaching the event handler to that, setting the content of it, and then adding it as a child to the other element. Link to comment Share on other sites More sharing options...
Hadien Posted September 10, 2014 Share Posted September 10, 2014 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 More sharing options...
etsted Posted September 11, 2014 Author Share Posted September 11, 2014 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 More sharing options...
Ingolme Posted September 11, 2014 Share Posted September 11, 2014 Where is showMore() being called from? Link to comment Share on other sites More sharing options...
etsted Posted September 12, 2014 Author Share Posted September 12, 2014 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 More sharing options...
justsomeguy Posted September 12, 2014 Share Posted September 12, 2014 You have a syntax error in that function. That's the error message you should be looking at. The error about showMore being undefined is due to the syntax error causing that code to not be parsed and executed in the first place. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now