javascript - 如何使左键单击按钮为对象中的值加 1，右键单击按钮减 1

Question

我对 html 还很陌生，在 html 中使用脚本时遇到了麻烦。我在 csp code.org 类(class)上学习了 javascript，现在我正在自学 html。我对 javascript 很满意，但我不太确定在尝试组合这两种语言时要使用哪些标签和 html 特定的 javascript 命令。

所以 tldr 3 件事

所以我希望按钮旁边的 p1 元素文本表示 bikeHorn.amount 的值

当我左键单击按钮时，我想将 bikeHorn.amount 增加一

当我右键单击按钮时，我想将 bikeHorn.amount 减少 1

谢谢!

var bikeHorn = {
    amount: 0,
    type: "sound",
    level: 1,
    exp: 0,
    damage: 4,
    prestige: false,
    propAccuracy: 95,
};

<div>
  <button>
      <img src="images/bike.png" alt="bike" width="64" height="64">    
      <p1>1</p1>            
  </button>
</div>           

额外信息，bikeHorn.amount 是一个递增或递减 1 的整数

Answer 1

您只需将正确的事件添加到 JavaScript 内的按钮即可。 click 将处理左键，contextmenu 将处理右键单击。

var bikeHorn = {
  amount: 0,
  type: "sound",
  level: 1,
  exp: 0,
  damage: 4,
  prestige: false,
  propAccuracy: 95,
};
//  Select the button from the page.
var button = document.querySelector( 'button' );
//  Select the paragraph tag.
var paragraph = button.querySelector( 'p' );
//  Add a click event to the button for the left-click.
button.addEventListener( 'click', function( event ) {
  bikeHorn.amount += 1;
  paragraph.innerHTML = bikeHorn.amount;
});
//  Add a contextmenu event to the button for the right-click.
button.addEventListener( 'contextmenu', function( event ) {
  // Prevent the default behaviour so the contextmenu won't show.
  event.preventDefault();
  bikeHorn.amount -= 1;
  paragraph.innerHTML = bikeHorn.amount;
});

<div>
  <button>
    <img src="images/bike.png" alt="bike" width="64" height="64">
    <p>0</p>
  </button>
</div>

请记住，按钮内的初始值必须与 bikeHorn 内的值匹配。因此，如果 bikeHorn 数量从 0 开始，段落内的 HTML 也应该从 0 开始，否则第一次左键单击时您不会看到变化。