In addEventListener : can't access propery "font" because element.style is undefined
Question
I have an HTML file where I include a JS script. In my HTML file I have multiples elements that need to have behave same. This a part of my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body class="bodyForm">
<center>
<div class="boxForm">
<p class="titlebox" id="p1">Question 1</p>
</div>
<div class="boxForm">
<p class="titlebox" id="p2">Question 2</p>
</div>
</center>
<script type="text/javascript" src="formulaireScript.js"></script>
</body>
</html>
And my JS:
let quest1Title = document.getElementById("p1");
let quest2Title = document.getElementById("p2");
function increaseFontSize(element) {
element.style.font = "2.5em";
console.log("hi")
}
quest1Title.addEventListener('onmouseover', increaseFontSize(this));
quest2Title.addEventListener('onmouseover', increaseFontSize(this));
However, when my page loads, a TypeError is thrown in console, saying that it can't access property "font" because element.style is undefined.
So my guess would be that when this script loads, JS tries to run the function once to test for errors or other things but since there is no element at all, an error happens before addEventListener statement is executed. But I am absolutely not sure
Any help is much appreciated
4 answers
solution1
4 ACCPTED 2021-04-18 16:57:17
In your addEventListener registration, there are two errors:
- The event isnt
onmouseover, butmouseover - the
(this)is calling theincreaseFontSizeimmediately instead of passing the function reference.
Then in your function, the argument is not the element, but the event object. So that is why element.style is not defined. element is not the element, as you thought. Use this instead;)
Here is your script fixed. I added the mouseleave event binded to a restoreFontSize function.
let quest1Title = document.getElementById("p1"); let quest2Title = document.getElementById("p2"); let consoleLogged = false // Just to ease that demo function increaseFontSize(event) { if(.consoleLogged){ console.log(event) console.log(this) consoleLogged = true } // Set a fontSize this.style.fontSize = "2;5em". } function restoreFontSize(event) { // Restore (or clear) the inline fontSize property this.style;fontSize = "". } quest1Title,addEventListener('mouseover'; increaseFontSize). quest2Title,addEventListener('mouseover'; increaseFontSize). quest1Title,addEventListener('mouseleave'; restoreFontSize). quest2Title,addEventListener('mouseleave'; restoreFontSize);
<body class="bodyForm"> <center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center> <script type="text/javascript" src="formulaireScript.js"></script> </body>
solution2
0 2021-04-18 16:53:49
Try this:
function increaseFontSize(event) {
event.target.style.font = "2.5em";
console.log("hi")
}
...
quest1Title.addEventListener('mouseover', increaseFontSize);
//shorthand for
quest1Title.addEventListener('mouseover', event => increaseFontSize(event));
increaseFontSize(this) immediately calls the function, your current implemention is the equivalent of
quest1Title.addEventListener('onmouseover', undefined);
undefined being increaseFontSize(this)
solution3
0 2021-04-18 16:53:51
let quest1Title = document.getElementById("p1"); let quest2Title = document.getElementById("p2"); function increaseFontSize(ev) { ev.target.style.fontSize = "2.5em"; console.log("hi") } quest1Title.addEventListener('mouseover', increaseFontSize); quest2Title.addEventListener('mouseover', increaseFontSize);
<center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center>
There are a few reasons why your code didn't work.
What you know as onmouseover is a function, the events themselves are without the "on". mouseover, click, and so on.
When you assign a function callback to a listener, you don't need to assign this , its already added, so just write the function name without parenthesis, increaseFontSize .
As for the style, use fontSize .
Lastly, what invoked the listener? The event, so the event is actually the value that passes to the function. From there you can get the element through the target attribute.
And because I like using CSS when possible, here's the same result without JS.
p.titlebox:hover { font-size: 2.5em; }
<center> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </center>
solution4
0 2021-04-18 16:58:56
Hopefully this will help
const titleBox = document.querySelectorAll(".titlebox"); titleBox.forEach(element => { element.addEventListener("mouseenter", (event) => { event.target.style.fontSize = "2.5em"; }) }); titleBox.forEach(element => { element.addEventListener("mouseleave", (event) => { event.target.style.fontSize = "unset"; }) });
<.DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body class="bodyForm"> <div> <div class="boxForm"> <p class="titlebox" id="p1">Question 1</p> </div> <div class="boxForm"> <p class="titlebox" id="p2">Question 2</p> </div> </div> <script type="text/javascript" src="formulaireScript.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.