Ask coding questions

← Back to all posts
whats wrong with my javascript code
JulienBensliman

Hello all !
I try to make my affichage function and to change my html code :

the new html code:

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> <script src="index.js"></script> <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> --> </head> <body> <script src="index.js"></script> <div id="liste"> <select onchange="affichage()" id="mois"> <option value="0"> tous</option> <!-- Toute l'année --> <option value="01"> janv</option> <option value="02"> fev</option> <option value="03"> mar</option> <option value="04"> avr</option> <option value="05"> mai</option> <option value="06"> juin</option> <option value="07"> juil</option> <option value="08"> aout</option> <option value="09"> sept</option> <option value="10"> oct</option> <option value="11"> nov</option> <option value="12"> dec</option> </select> <select onchange="affichage()" id="année"> <option value="2017">2017</option> <option value="2018">2018</option> </select> </div> <div id="affichage"> <img src="images/AttributionCodeConfidentiel.png" data-annee="2017" data-mois="0"/> <img src="images/AttributionCodeConfidentiel_201706.png" data-annee="2017" data-mois="06"/> <img src="images/AttributionCodeConfidentiel_201707.png" data-annee="2017" data-mois="07"/> <img src="images/AttributionCodeConfidentiel_201708.png" data-annee="2017" data-mois="08"/> <img src="images/AttributionCodeConfidentiel_201709.png" data-annee="2017" data-mois="09"/> <img src="images/AttributionCodeConfidentiel_201710.png" data-annee="2017" data-mois="10"/> <img src="images/AttributionCodeConfidentiel_201711.png" data-annee="2017" data-mois="11"/> <img src="images/AttributionCodeConfidentiel_201712.png" data-annee="2017" data-mois="12"/> <img src="images/AttributionCodeConfidentiel_201801.png" data-annee="2018" data-mois="01"/> <img src="images/AttributionCodeConfidentiel_201802.png" data-annee="2018" data-mois="02"/> <img src="images/AttributionCodeConfidentiel_201803.png" data-annee="2018" data-mois="03"/> <img src="images/AttributionCodeConfidentiel_201804.png" data-annee="2018" data-mois="04"/> <img src="images/AttributionCodeConfidentiel_201805.png" data-annee="2018" data-mois="05"/> <img src="images/AttributionCodeConfidentiel_201806.png" data-annee="2018" data-mois="06"/> <img src="images/AttributionCodeConfidentiel_201807.png" data-annee="2018" data-mois="07"/> <img src="images/AttributionCodeConfidentiel_201808.png" data-annee="2018" data-mois="08"/> </div> </body> </html>

and my function affichage :

function affichage()
{
var val_mois = document.getElementById('mois');
var val_annee = document.getElementById('annee');

var images = document.querySelectorAll('#affichage img');
for (var i = 0; i< val_mois.length; i++){
for (var j=0; j<val_annee.length;j++){
var mois_value = number(val_mois.value);
var annee_value = number(val_annee.value);
images.forEach( function(image){
if( (mois_value == 0 && image.dataset.annee == annee_value)
|| (mois_value != 0 && image.dataset.mois == mois_value && image.dataset.annee == annee_value )
){
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
}
}
}

but i have this error : "TypeError: val_annee is null" :(

Voters
JulienBensliman
Comments
hotnewtop
timmy_i_chen

It would be a lot easier to debug if it were in a repl, just saying ;)

Make an HTML/CSS/JS repl here:
http://repl.it/languages/html

JulienBensliman
Geocube101

@JulienBensliman Was this repl renamed or deleted? It no longer exists.

JulienBensliman
CSharpIsGud

@JulienBensliman Runs fine for me

JulienBensliman
JulienBensliman

@CSharpIsGud you dont have error in the console ? because for me it donk work :
https://storage.googleapis.com/replit/images/1535706485249_4746bd2233a4152511a5ccfe8fdbf873.pn

CSharpIsGud

@JulienBensliman Is this the element its trying to use?

CSharpIsGud

@JulienBensliman Look at the html element with the id annee, the first e is a é not a regular e