Changing html input image with javascript eventhandler

Question

I'm in the process of building a very simple blogging tool for my personal website. One feature I'm working on is a comments section. Next to each blog post on my website is a button that, once clicked, shows the comments for that particular blog post.

The comment buttons are created dynamically in javascript with

  var commentLinks = document.createElement("INPUT");
        commentLinks.setAttribute("type", "image");
        commentLinks.setAttribute("src", "linkredacted");
        commentLinks.setAttribute("id", "commentButton"+i);
        commentLinks.addEventListener("onmouseover", function(){
    changeSrc(commentLinks);
}, false);

The problem I am facing is that the mouseover event never fires. I have verified that my URL paths are correct and that the original button is created successfully, but no matter what I try I cannot get the button to resize after the mouseover event. Here is the changeSrc function that the code above calls:

function changeSrc(commentLinks)
{
  commentLinks.src = "linkredacted";
}

I have also tried using setAttribute which did not work, as well as placing the entirety of the function call in one anonymous function, which also did not work. Any help would be greatly appreciated

Just use a background-image and CSS. It's 2020, not 2000. :P — Heretic Monkey
– Heretic Monkey, Commented Jan 26, 2020 at 22:08
The purpose of building project from scratch is to push myself to learn Javascript fully so using CSS is not the goal. — nebekerdev
– nebekerdev, Commented Jan 26, 2020 at 22:15

Rob Moll · Accepted Answer · 2020-01-26 22:09:48Z

2

Use mouseover. Not onmouseover commentLinks.addEventListener("onmouseover", function(){ should be commentLinks.addEventListener("mouseover", function(){

answered Jan 26, 2020 at 22:09

Rob Moll

3,4712 gold badges12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nebekerdev Over a year ago

See response. Thank you for the answer.

Collectives™ on Stack Overflow

Changing html input image with javascript eventhandler

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related