[Résolu] Récupération data Json apres un click

Bonjour,

je suis actuellement en train de bricoler du javascript avec du JSON et je rencontre une difficulté que je n'arrive pas à résoudre.

je souhaiterais simplement recuperer des datas du json suite à un click sur un bouton.


actuellement mon script fonctionne comme cela :
GETJSON-> Génération d'un menu 'select' + bouton -> get element onclick -> execution d'une fonction

le data.json

[
  {
    "variete": "petit pois",
    "image": "ppois.jpg",
    "rayon": 5
  },
  {
    "variete": "carotte",
    "image": "carotte.jpg",
    "rayon": 6
  }
]

la partie génération du menu 'select',
dans cette partie , je recupere le json et crée un petit menu deroulant

  (function () {
       $(document).ready(function(){        
              var url = "data.json";
             $.getJSON(url, function(json) {
               var select = $("<select></select>").attr("id", "menuselect").attr("name", "image");
               $.each(json,function(index,json){
                select.append($("<option></option>").attr("value", json.image).text(json.variete));
               });     
               $("#container").html(select);
    var sel = document.getElementById('menuselect');
    document.getElementById('valeur').onclick = function () {
    fonction_post_click();
    }
});  
});
}());

et là ou je bloque c'est que dans la partie function_post_click() , je n'arrive pas a reussir et comprendre comment , recuperer des data en fonction de l'id du menuselect .

  (fonction_post_click(){
	   var sel = document.getElementById('menuselect'); //je recupere le click
// mais maintenant je souhaiterais par exemple avoir la donnée 'rayon' mais comment ??
})

j'espere etre assez precis , je vous remercie de votre aide .

Bonne journée
Modifié par roxor45 (22 Mar 2019 - 09:27)

Et l'eau,

Désolé mais dans ton code, il y a à boire et à manger. C'est assez confus et de ce fait je ne peux pas te répondre correctement. Je t'invite à regarder cette doc (Fonctions en JS)

Ensuite une closure ne se fait pas comme tu l'as écrit. Regarde sur la mdn comment et pourquoi mettre en place une closure.

Au passage, l'événement associé à "document.getElementById('valeur')" n'est pas "click" mais plutôt "change" apparemment.

j'ai fais un peu de ménage dans le code , voici le code de base :

$(document).ready(function(){        
var url = "data.json";
	$.getJSON(url, function(json) {
	var select = $("<select></select>").attr("id", "menuselect").attr("name", "image");
		$.each(json,function(index,json){
		select.append($("<option></option>").attr("value", json.image).text(json.variete));
		});     
	$("#container").html(select); //fin de la generation du menu html select
	
        var sel = document.getElementById('menuselect'); //test pour retour visuel
	var el = document.getElementById('display');//test pour retour visuel
		document.getElementById('showVal').onclick = function () {//test pour retour visuel
		el.value = sel.value;//test pour retour visuel
		fonction_post_click();//test pour retour visuel
		}//test pour retour visuel
		document.getElementById('showTxt').onclick = function () {//test pour retour visuel
		el.value = sel.options[sel.selectedIndex].text;//test pour retour visuel
		}//test pour retour visuel
	});
});

Ma question c'est comment récupérer dans ma fonction "fonction_post_click();" la valeur sélectionne lors du clic ?

j'ai posé le script jsfiddle : https://jsfiddle.net/25dmnp7v/1/

Merci de votre aide

j'ai trouvé le bug merci !