1 answer
Hello,
when testing your code, you need to open the console (developer tools accessible via the browser menus, Console tab). It allows you to display errors and you will quickly see where your error comes from.
A hint, check your variable names.
And the debugging console is an essential tool to save time re-reading your code.
You are using functions:
"I also think that my employed technique is quite poor, as I'm only playing with CSS... "
On the other hand, as long as it works, but essentially JavaScript is there to manipulate the page: HTML and CSS (the DOM) mainly, the rest are "facilities" of programming (variables, tests/conditions and other logical structures).
https://www.alsacreations.com/astuce/lire/1436-console-javascript.html
when testing your code, you need to open the console (developer tools accessible via the browser menus, Console tab). It allows you to display errors and you will quickly see where your error comes from.
A hint, check your variable names.
And the debugging console is an essential tool to save time re-reading your code.
You are using functions:
image2.addEventListener('click', function() { if (image2.style.width == "50%" ) { image2.style.width = "100%"; image.style.display = "none"; } else image2.style.width = "50%"; image.style.display = "block"; }); /* addeventListener is a function (from the language, pre-made for simplicity) that takes another function in parentheses called anonymous since it hasn't been given a name (which can be useful for certain uses but does not allow for reuse):*/ function(){ //if(image //.... } // structure of a function in JavaScript function nomDeLaFunction( "here optional and unlimited parameter/s" ){ //-- body of the function, basically what it is supposed to do and the use of optional parameters }//-- the last brace indicates the end of the function //-- And as seen in your script, we can nest functions within each other, //-- there are however rules to consider such as "the lifespan" of each function //-- indeed, a function once read and resolved no longer exists and its content and what happens in it is //-- not directly accessible (there is a way to bypass this restriction) from outside it //-- You know almost everything about functions, //--- although there are indeed many ways to write functions and objects (another important concept //-- in program organization) "I also think that my employed technique is quite poor, as I'm only playing with CSS... "
On the other hand, as long as it works, but essentially JavaScript is there to manipulate the page: HTML and CSS (the DOM) mainly, the rest are "facilities" of programming (variables, tests/conditions and other logical structures).
https://www.alsacreations.com/astuce/lire/1436-console-javascript.html
I did notice an error in a variable, but the code still doesn't work. And I must admit, I don't really know how to handle a function... Please help me ;)
The problem is with image2. When I click on it, both images enlarge, and image1 doesn't disappear....
um, not just one!!! hence the use of the console which shows you ALL your coding errors.
Help for what? If it's to do the work for you, that's not help and I don't have time for that...
In any case, you're really not far off based on what you say if it's working, you just need to target the right image for each instruction or block of instructions.
For a function, you have the detailed explanation in my previous message, otherwise you just need to open any beginner tutorial or course in programming. But that's not the point; it was to respond to the fact that you didn't know how to use a function when there are already several in your script, so you're doing it without even realizing it. And it's not very complicated; on the contrary, it simplifies quite a few things without even needing to go that far: https://en.wikipedia.org/wiki/Functional_programming