Comment transformer du Jquery a du Vanilla JS ?

snakeboarder
Javascript

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

10 réponses

Defy

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

Kenor

Ici aussi : http://youmightnotneedjquery.com/

snakeboarder
Auteur

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

Defy

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

snakeboarder
Auteur

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

Kenor

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.

snakeboarder
Auteur

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

Kenor

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

snakeboarder
Auteur

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

Kenor

C'est une façon de faire en tout cas.
Inutile de déclarer dataNote si tu ne fais aucun traitement dessus, autant directement l'assigné à ta value.