Comment transformer du Jquery a du Vanilla JS ?

Default
,

Bonjour la room,

J'aurais besoin d'un peu d'aide pour mon code.

Ce que je fais

Je récupére l'attribut data-note="" de l'étoile selectionnée
et placer la valeur dans le input
<input id="noteznous-note-value" type="hidden" name="noteznous-note" value="">

/*
=======================================================
            *  HTML 5 *
=======================================================
*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/css/style.css">
    <title>Star</title>
</head>
<body>
    <div class="noteznous-note">
        <span class="noteznous-item" data-note="1">☆</span><span class="noteznous-item" data-note="2">☆</span><span class="noteznous-item" data-note="3">☆</span><span class="noteznous-item" data-note="4">☆</span><span class="noteznous-item" data-note="5">☆</span>
        <input id="noteznous-note-value" type="hidden" name="noteznous-note" value="">
    </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="./js/star.js"></script>
</body>
</html>
/*
=======================================================
            *  CSS3 *
=======================================================
*/
.noteznous-item {
  color: #455A64;
  font-size: 40px;
  cursor: pointer; }
.noteznous-item.active {
  color: gold; }
// DOM ready
$( document ).ready( function () {


    // Fonction pour récupérer la data de la note
    $(".noteznous-note span").on( "click", function() {
        var note = $( this ).attr( "data-note" );   
        $( "#noteznous-note-value" ).val( note );
    });

Ce que je Veux

Je voudrais passer mon code en Vanilla JS

Merci pour vos réponses

9 Réponse

Default
, Il a répondu à ma question !

voila un petit guide sympa pour passer de jquery a vanilla ;-)

48587
, Il a répondu à ma question !
Default
, Il a répondu à ma question !

@Kenor,
Quelqu'un peut me dire comment faire un
$( this ).attr
avec un document.querySelectorAll()
et la node list

Default
, Il a répondu à ma question !

ben vas voir les liens qu'on t'as donnée, tu as plein de choses qui t'explique comment faire.

Default
, Il a répondu à ma question !

Du coup j'ai fais un JS
comme ceci

    // Fonction pour récupérer la data de la note
    var notezNousItems = document.querySelectorAll(".noteznous-note span"),
        valeurNote = document.getElementById("noteznous-note-value");

    for(var i = 0 ; i < notezNousItems.length; i++) {
        notezNousItems[i].addEventListener("click", getAndSetNote);
    }

    function getAndSetNote() {
        var dataNote = this.getAttribute("data-note");
        valeurNote.setAttribute("value", dataNote);
    }

Cela vous semble correcte dans le code et la syntaxe ?
Merci pour vos remposes

48587
, Il a répondu à ma question !

Pour la valeur d'un formulaire, il faut théoriquement utiliser le propriété "value".

Donc valeurNote.value = dataNote;

Sinon, ça me parait cohérent.

Default
, Il a répondu à ma question !

Merci @Kenor
Autre question, pense-tu que

valeurNote.setAttribute("value", dataNote);

et moins rapide ou moins correcte dans la syntaxe que ta solution ?

valeurNote.value = dataNote;

Bonne journée

48587
, Il a répondu à ma question !

Ce n'est juste pas pareil. Sur l'un tu changes l'attribut "value" sur l'autre, tu changes la valeur réel du formulaire.

Dans l'autre sens par exemple, getAttribute('value') va te retourner la valeur initial de ton formulaire. Si le visiteur change cette valeur et que tu veux la capturer, getAttribute ne marchera pas, il faudra forcement utiliser .value

Default
, Il a répondu à ma question !

Bonjour @Kenor

Donc le code le mieux optimiser et le plus propre serait comme celui-là ?

    // Fonction pour récupérer la data de la note
    var notezNousItems = document.querySelectorAll(".noteznous-note span"),
        valeurNote = document.getElementById("noteznous-note-value");

    for(var i = 0 ; i < notezNousItems.length; i++) {
        notezNousItems[i].addEventListener("click", getAndSetNote);
    }

    function getAndSetNote() {
        var dataNote = this.getAttribute("data-note");
        valeurNote.value = dataNote;
    }

Merci beaucoup pour ton aide