时间戳

首页 > 解决方案 > 手动排序，但不能使用“onclick”功能

javascript - 手动排序，但不能使用“onclick”功能

问题描述

我有一个名称列表，我想按它们有多少点对其进行排序，默认设置为0，每次我按下按钮时，它都会为该特定名称添加一个点，但不会将它们排在第一位地方，如果我在列表中手动添加点JS它工作正常，但当我使用按钮时不行。这是我尝试过的：

 let characters = [
       {name: document.getElementById("name 1").textContent, points: 0},
       {name: document.getElementById("name 2").textContent, points: 0},
       {name: document.getElementById("name 3").textContent, points: 0}
    ];
        
    function choice (button) {
       const buttonCharacterObject = characters.find(obj => obj.name === button.textContent);
       buttonCharacterObject.points += 1;
       
       console.log(characters)
    }

    const ranking = characters.sort((a, b) => (a.points < b.points ? 1 : -1));
    
    console.log(ranking);
    <button id="name 1" onclick="choice(this)">John</button>
    <button id="name 2" onclick="choice(this)">Martin</button>
    <button id="name 3" onclick="choice(this)">Sam</button>

标签： javascripthtmlarrayssorting

解决方案

只需将排名也放入函数中，控制台输出排名字符。

 let characters = [
       {name: document.getElementById("name 1").textContent, points: 0},
       {name: document.getElementById("name 2").textContent, points: 0},
       {name: document.getElementById("name 3").textContent, points: 0}
    ];
        
    function choice (button) {
       const buttonCharacterObject = characters.find(obj => obj.name === button.textContent);
       buttonCharacterObject.points += 1;
       
    const ranking = characters.sort((a, b) => (a.points < b.points ? 1 : -1));
    
    console.log(ranking);
    }

    
    <button id="name 1" onclick="choice(this)">John</button>
    <button id="name 2" onclick="choice(this)">Martin</button>
    <button id="name 3" onclick="choice(this)">Sam</button>

推荐阅读