Defined function (not defined yet) in Javascript

Question

Defined function (not defined yet) in Javascript

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

(! note: I already looked at this site and in others the answer but I did not find the solution to my problem. Here are some questions I tried to use:

Why are you giving "Uncaught ReferenceError: getSetorObj is not defined"?

Function not set with javascript

JAVASCRIPT - Function does not load

I have the following problem: I have 2 files, one containing html5 and the other javascript. But when trying to use the "onclick" event in a "li" to call a function in my javascript file the function simply does not work, when checking my console I came across the following error line in javascript:

ReferenceError: openphoto is not defined

I have already checked the path to the javascript file, and also tried to change the position of my "script" tag to the end of the "body", but nothing changes.

HTML (relevant code only):

<!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>
                <p>Vamos as fotos!<br/></p>
                <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>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto4.jpg"></li>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto5.jpg"></li>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto6.jpg"></li>
                    <li onclick="abrirfoto(this);"><img src="Backgrounds/Foto7.jpg"></li>
                </ul>
            </section>
        </main>
        <footer>
            Copyright © by:<br>
            Gabriel Rocha e Gustavo Rocha
        </footer>           
    </div>
</body>

obs: in the whole code the attribute "alt" is used in the images.

Javascript (that's just it (I'm learning (report any error ° - °)))

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

I'm using FF 47.0, already tested in chrome also (I do not know which version); if you need any information, please comment.

Edit: Now I noticed another error in the console (I do not know if it is relevant):

SyntaxError: identifier starts immediately after numeric literal

I also tried to put my function inside the script of my html5, but of the same error.

javascript html5

asked by anonymous 13.06.2016 / 03:20

2 answers

1

Normally when you enter this within a method in JavaScript , the interpreter inserts an attribute within the method.

To change the size as you want, you must pass the object as a parameter into 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 this within the method, you must assign a method directly to the desired attribute of your object, try to capture it by id , class , etc. So the this within the method becomes unique to your element.

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

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

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

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

13.06.2016 / 03:37

Join two items from an IList in a single item by the Id Insert in mysql with strtoupper is not accepting numbers and letters

score 3 · Accepted Answer

Two things to fix:

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

# 1 - scope

The ReferenceError: abrirfoto is not defined error occurs 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 defined 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 the function you are calling this which is not what you think. When you use an approach where you do li.addEventListener(... then the execution context (that is what this points to) is the element. When you use inline in HTML the this is window .

Solution:

HTML:

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

JavaScript:

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

Are there better ways to do this?

Yes, as the Brumazzi DB also mentioned, you can do this with CSS. In this case maybe just this do what you want :

li:active{
    background-color: red;
}

If it is not suffient it uses CSS classes and changes the class in the element like this:

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

and in CSS:

.red {
    background-color: red;
}