Defined function not defined

Question

Defined function not defined

Asked 8 years, 5 months ago

Viewed 1,766 times

2

My function being called during onclick event is not being recognized, this is the console error:

ReferenceError: abrirfoto is not defined

HTML(only relevant code):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Mycode</title>
        <script src="Javascript/javascript.js" type="text/javascript"></script>
    </head>
    <body>  
    <div id="layout">
       <main>
            <section>
                <ul id="dpf">
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto1.jpg"></li>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto2.jpg"></li>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto3.jpg"></li>
                </ul>
            </section>
        </main> 
    </div>
</body>

Obs:in integer code the attribute "alt" is used in images.

Javascript

function abrirfoto(myElement) {
    myElement.style.width = 300px;
}

I tried to put my function inside a script tag of my Html5, but the same error persists.

2 answers

2

Two things to fix:

#1 - put the function in the overall scope
#2 - pass a reference to the clicked element to the function

#1 - scope

The mistake ReferenceError: abrirfoto is not defined happens when the function is not globally accessible. An example of this is:

window.onload = function(){
    function abrirfoto() {
        this.style.width = 300px;
    }
}

In this example the function is closed within another function and therefore only accessible within it.

Solution:

function abrirfoto() {
    this.style.width = 300px;
}
window.onload = function(){
    // e aqui o código que realmente precisa de estar aqui
}

#2 - context

The second problem is that in function you are calling the this which is not what you think. When you use an approach where you do li.addEventListener(... the context of implementation (or whatever the this point) is the element. When you use inline in HTML the this is the window.

Solution:

HTML:

<li onclick="abrirfoto(this)"><img src="Backgrounds/Foto1.jpg"></li>

Javascript:

function abrirfoto(el) {
    el.style.width = 300px;
}

There are better ways to do this?

Yeah, like the Brumazzi DB also mentioned, you can do this with CSS. In this case maybe only this do what you want:

li:active{
    background-color: red;
}

If not enough use CSS classes and change the class in the element so for example:

function abrirfoto(el) {
    el.classlist.add('red');
}

and in the CSS:

.red {
    background-color: red;
}

Browser other questions tagged javascript html5 function

You are not signed in. Login or sign up in order to post.

by Brumazzi DB • **4,345** points · Answer 1 · 2016-06-13T01:37:35+00:00

Usually when you put this within a method in Javascript, the interpreter inserts an attribute within the method.

To modify the size as you want, you must pass the object as a parameter inside your method.

function call(element){
  element.style.background = 'red';
}

<ul>
  <li onclick="call(this);">a</li>
  <li onclick="call(this);">b</li>
  <li onclick="call(this);">c</li>
  <li onclick="call(this);">d</li>
  <li onclick="call(this);">e</li>
</ul>

To use the this within the method, you must assign a method directly to the desired attribute of your object, I try to capture it by id, class, etc. So the this within the method becomes exclusive to its element.

var el = document.getElementById('d');

el.onclick = function(){
  this.style.background= 'red';
}

<div id="d">
  asdad
</div>

Preferably by CSS for any kind of change in the visual part of your code.