cabbie Posted May 11, 2023 Share Posted May 11, 2023 I an transferring buttons a another page (localStorage) and each have a comment when hovered. It would save a lot of fuss to be able to store the comments in the buttons. Is there a way to retrieve the value out of such as this button? Also trying to pass the id to a show function to display the comment for that button. The tagg but1 is from trying with getElementByTagName. <html> <but1 type='button' id='1' class='btn btn-warning' value='Savin' onmouseover='showFunction(1)' onmouseout='clrdes()' onclick='goTo(500)'>1</button> </html> Quote Link to comment Share on other sites More sharing options...
requinix Posted May 11, 2023 Share Posted May 11, 2023 Yes. it's possible to do this. But you need to change how you do events. Using inline on* events is old and makes solving your current problem a little harder. Your first step is to modify how your hover comments work to use modern Javascript practices with event listeners. Your HTML for the button will be as simple as <but1 type='button' id='1' class='btn btn-warning hover-comment' value='Savin'>1</button> That removes the onmouseover, onmouseout, and onclick handlers, and instead added a class name of "hover-comment". Your new Javascript code will add an event listener using that "hover-comment" (or whatever you want to call it) - how you do so depends and I can't tell just from what you've posted. Once you have the modified HTML and the comment hover functionality improved, it will be much easier to do the "store the comments in the buttons" that you want. Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 12, 2023 Author Share Posted May 12, 2023 I,M trying to things that havnt been done before and it would be a lot easier for me to make a video to explain what I am trying to do and I hate to throw code out without a decent explanation of what does what. I,ll just say the main purpose of the buttons is provide entry points in videos. the onclick goes to a desired point in the video. That part is fairly easy when a button is added it is stacked in localStorage and the row of buttons are all innerHTML in a dive The entry point time is stored in each button. The buttons are transferred to another site &butts=sl my question would be with the new class of hover-comment i need a basic run-down on how to make it fly Thanks..The site For those that want to see the operation, ill provide a link. Click on the first image of the gal to go to that video. m not even sure if it is working now ie making new entry points. Site Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 12, 2023 Author Share Posted May 12, 2023 (edited) OK I,m getting ideas now using the id w3 Edited May 12, 2023 by cabbie Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 12, 2023 Author Share Posted May 12, 2023 Still havnt figured out how to retrieve value. Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 12, 2023 Author Share Posted May 12, 2023 OK Got it Attribute Thanks requinix One little hint can lead down the right path.. Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 12, 2023 Author Share Posted May 12, 2023 I have the event lisener working and go to mouseover function. but get attribute i need id. (Cant get with TagName) jsfiddle Quote Link to comment Share on other sites More sharing options...
kicken Posted May 13, 2023 Share Posted May 13, 2023 Your fiddle doesn't really make sense. You keep referencing an element with id="demo" but no such element exists. In mouseOver you set the content, while in mouseOut you just change the color to black. Strange combination. Your mouseOver function is using your element variable, which is your id="butts" div. That div does not have a com attribute. It seems like you're just trying to add tool tips to your buttons. If you only want simple text-only tool tips, then you can just use the title attribute and not use JS at all. A JS solution is only needed if you want stylized tool tips, or for them to display in a specific place on the page. If you do need the JS, then what you want to do is add both your mouseover and mouseout event handlers to your butts element. On mouse over, check if the target element has a com attribute and if so display it. On mouse out, clear whatever has been set. Modified fiddle const element = document.getElementById("butts"); element.addEventListener("mouseover", mouseOver); element.addEventListener("mouseout", mouseOut); function mouseOver(e) { if (e.target.hasAttribute('com')){ let text = e.target.getAttribute("com"); document.getElementById("demo").textContent = text; } } function mouseOut(e) { document.getElementById("demo").textContent = ""; } Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 13, 2023 Author Share Posted May 13, 2023 (edited) OK Thanks for the response kicken . jsfiddle is a screwedup mess I was changing things trying to get something to work and totally destroyed it due to mass confusion I'll clean it up and try your suggestion. . Your mouseOver function is using your element variable, which is your id="butts" div. That div does not have a com attribute. I will windup with 8 buttons and need to get the com attribute out of the buttons. I put the the buttons in the butts div That was the only wayI could get hover to work on the buttons. Edited May 13, 2023 by cabbie Quote Link to comment Share on other sites More sharing options...
Solution cabbie Posted May 13, 2023 Author Solution Share Posted May 13, 2023 You are a genius!!! Try it now.. Quote Link to comment Share on other sites More sharing options...
cabbie Posted May 13, 2023 Author Share Posted May 13, 2023 THis is the correct jsfiddle correct jsfiddle Quote Link to comment Share on other sites More sharing options...
maxxd Posted May 13, 2023 Share Posted May 13, 2023 Honestly, if you want fancy tooltips I'd recommend using Tippy - super easy and powerful. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.