计数器应用程序：按钮函数以触发各种消息

Question

我正在使用Vanilla JavaScript构建乘客计数器应用程序，并试图围绕单击HTML DOM对象按钮时如何将我的头围绕着我要根据计数的位置来更改我要输出的消息。

我有一个增加和减小的按钮，将计数增加或减少1。每辆总线具有不同的乘客能力，因此我将每三个公共汽车都放在Navbar中（DDS，DDSB，MCI）。例如，在单击“ DDS”时，我希望相对于计数的位置调用特定消息。同样适用于其他公交车型。

let messageEl = document.getElementById("message-el")
let countEl = document.getElementById("count-el")
let ddsNavEl = document.getElementById("dds-nav-el")
let ddsbNavEl = document.getElementById("ddsb-nav-el")
let mciNavEl = document.getElementById("mci-nav-el")
let increaseEl = document.getElementById("increase-btn")
let decreaseEl = document.getElementById("decrease-btn")
let increaseFiveEl = document.getElementById("increaseFive-btn")
let decreaseFiveEl = document.getElementById("decreaseFive-btn")
var count = 0

/* BASIC COUNTER FUNCTIONALITY WITH NO SEATING LIMIT WARNINGS */
function increase() {
    count++
    countEl.textContent = count
}

function decrease() {
    count--
    countEl.textContent = count
}

function increaseFive() {
    count += 5
    countEl.textContent = count
}

function decreaseFive() {
    count -= 5
    countEl.textContent = count
}

function reset() {
    messageEl.textContent = "";
    countEl.textContent = 0
    count = 0
    ddsNavEl.style.fontWeight = "normal";
    ddsbNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
} 


/* COUNTER WITH SEATING AND STANDING LIMIT WARNINGS */

function ddsSelect() {

    if (count === 15) {
        message = "you are at full seating capacity"
    } else if (count > 16) {
        message = "you are over capacity"
    } else {
        message = ""
    }
    messageEl.textContent = message
    
    ddsNavEl.style.fontWeight = "bold";
    ddsbNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
}

function ddsbSelect() {

    if (count === 12) {
        message = "you are at full seating capacity"
    } else if (count > 13) {
        message = "you are over capacity"
    } else {
        message = ""
    }
    messageEl.textContent = message

    ddsbNavEl.style.fontWeight = "bold";
    ddsNavEl.style.fontWeight = "normal";
    mciNavEl.style.fontWeight = "normal";
}

function mciSelect() {
    
    if (count === 10) {
        message = "you are at full seating capacity"
    } else if (count > 11) {
        message = "you are over capacity"
    } else {
        message = ""
    }
    messageEl.textContent = message

    mciNavEl.style.fontWeight = "bold";
    ddsNavEl.style.fontWeight = "normal";
    ddsbNavEl.style.fontWeight = "normal";
}

Answer 1

我没有在此示例中包含您的所有功能，但是从本质上讲，我认为最好的方法是创建一个对象并根据其类型或某种形式的ID进行实例化。您在示例中提到，总线有三种类型...“ DDS，DDSB和MCI”，但实际上，通过使用此技术，您可以简单地实例化对象的实例，如果您需要在某个时候设置另一个总线未来。

下面的示例，所有这些功能都可以设置以接受HTML元素以更新各种接口元素。这些都不包括，因为没有提供。

let bus = {
  passengers: 0,
  increase: function() {
    this.passengers++;
    console.log(this.passengers);
  },
  decrease: function() {
    this.passengers--;
    console.log(this.passengers);
  },
  increaseFive: function() {
    this.passengers += 5;
    console.log(this.passengers);
  },
  decreaseFive: function() {
    this.passengers -= 5;
    console.log(this.passengers);
  }
};

// bus types dds, ddsb, mci

let ddsBus = Object.create(bus);

ddsBus.increase();
ddsBus.increaseFive();

let ddsbBus = Object.create(bus);

ddsbBus.increase();
ddsbBus.increaseFive();
ddsbBus.increase();

let mciBus = Object.create(bus);

mciBus.increase();
mciBus.increaseFive();
mciBus.increase();
mciBus.increase();

console.log("dds : " + ddsBus.passengers);    //expected value: 6
console.log("ddsb : " + ddsbBus.passengers);  //expected value: 7
console.log("mci : " + mciBus.passengers);    //expected value: 8