Почему селектор jQuery здесь не работает? - PullRequest
Новая
       20

Почему селектор jQuery здесь не работает?

0 голосов
/ 24 января 2020

Интересно, почему здесь не работает селектор jQuery по id, когда я пытаюсь обновить ячейки таблицы после создания героя. Я использую селектор basi c jQuery, но он ничего не делает даже с внутренним HTML. Селектор jQuery работает с функцией получения значения входа, но не после этого, для меня это не имеет смысла, и консоль не дает мне абсолютно никаких ошибок.

HTML

<div class="col-4 hero">
    <h2>Votre personnage</h2>
    <div>
        <h3>Créer un nouveau personnage</h3>
        <p class="alert alert-danger" role="alert">Attention ! créer un nouveau personnage supprimera tout de l'ancien.</p>
        <label>Nom</label>
        <input type="text" id="hero_name_input" name="hero_name_input">
        <button>Créer personnage</button>
    </div>
    <div>
        <h3>Les statistiques de votre personnage</h3>
        <table>
            <tr>
                <th>Nom</th>
                <td id="Hname"></td>
            </tr>
            <tr>
                <th>Habilité</th>
                <td id="Hskill"></td>
            </tr>
            <tr>
                <th>Endurance</th>
                <td id="Hstamina"></td>
            </tr>
            <tr>
                <th>Chance</th>
                <td id="Hluck"></td>
            </tr>
        </table>
    </div>
</div>

JS

$(document).ready(function() {

    $('.hero button').click( function create_hero() {
        let nom       = $('#hero_name_input').val(); // it works
        let habilite  = (roll_dice(1)+6);
        let endurance = (roll_dice(2)+12);
        let chance    = (roll_dice(1)+6);

        let hero = new Hero (nom, habilite, endurance, chance);
        //document.getElementById('Hname').innerHTML = hero.nom; // it works

        // not working block
        $('#Hname').html     = hero.nom;
        $('#Hskill').html    = hero.habilite.toString();
        $('#Hstamina').html   = hero.endurance.toString();
        $('#Hluck').html     = hero.chance.toString();
        // not working block
    });

    function roll_dice (dices) {
        if (dices == 1) {
            return Math.floor(Math.random()*6+1)
        }
        else {
            let d1 = Math.floor(Math.random()*6+1)
            let d2 = Math.floor(Math.random()*6+1)
            let dices_result = d1+d2;
            return dices_result;
        }
    }
});

Ответы [ 2 ]

5 голосов
/ 24 января 2020 
$('#Hname').html(hero.nom);

Это правильный способ использования функции jQuery .html().

jQuery html () документы

1 голос
/ 24 января 2020

In jQuery, html - это функция, поэтому вы должны использовать $('#Hname').html( hero.nom ).

...