Question

我对html很陌生，在html中使用脚本时遇到了麻烦。我在csp code.org课程上学习了javascript，现在我正在自学html。我可以使用javascript，但我不确定在尝试将两种语言结合使用时要使用哪些标记和html特定的javascript命令。

所以tldr 3件事

所以我想要按钮旁边的p1元素文本说出bikeHorn.amount的值

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

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

谢谢！

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>

extra info，bikeHorn.amount是一个向上或向下递增一个整数

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开始，否则您第一次点击左键就不会看到更改。

Answer 2

您可以使用以下代码单击按钮并替换$（“ p”）。html（）;和您的代码。

$WITHOUTCLIENT = $WITHOUTCLIENT | select -ExpandProperty Name

 $(document).ready(function(){         
   $('#box').mousedown(function(event) {  
    switch (event.which) {
    case 1:
     $("p").html("Left Mouse Clicked");
     break;
    case 2:
     $("p").html("Middle Mouse Clicked");
     break;
    case 3:
     $("p").html("Right Mouse Clicked");
     break;
    default:
     $("p").html("Option Not Found..");
    }
   });
  });

希望它对您有所帮助。如果它可以解决您的问题，请接受它作为答案，因为其他人可以将其称为解决方案。

Answer 3

请查看下面的代码片段，以实现不使用jquery的javascript。我们创建了一个ID为 amount 的跨度，并在其中显示bikeHorn.amount的值。此外，我们添加了事件监听器来处理按钮的左右单击。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<div>
  <button id="horn">
    <img src="images/bike.png" alt="bike" width="64" height="64" />
    <span id="amount">1</span>
  </button>
</div>

<script>
  var bikeHorn = {
    amount: 0,
    type: "sound",
    level: 1,
    exp: 0,
    damage: 4,
    prestige: false,
    propAccuracy: 95,
  };
  var el = document.getElementById("horn");
  var displayEl = document.getElementById("amount");
  el.addEventListener('click', function(event) {
    bikeHorn.amount += 1;
    displayEl.innerHTML = bikeHorn.amount;
  });
  el.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    bikeHorn.amount -= 1;
    displayEl.innerHTML = bikeHorn.amount;
  });
</script>
</body>

</html>

Answer 4

也许这对某人可能会有帮助。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <script>
    var bikeHorn = {
      amount: 0,
      type: "sound",
      level: 1,
      exp: 0,
      damage: 4,
      prestige: false,
      propAccuracy: 95,
    };

    function DoWork(event) {
      if (event.button == 0) //left click
      {
        bikeHorn['amount'] = bikeHorn['amount'] + 1;
        document.getElementById('bikeHornAmount').innerHTML = bikeHorn['amount'];
      } else if (event.button == 2) //rigth click
      {
        bikeHorn['amount'] = bikeHorn['amount'] - 1;
        document.getElementById('bikeHornAmount').innerHTML = bikeHorn['amount'];
      }
    }
  </script>

  <div>
    <button oncontextmenu="return false;" onmousedown="DoWork(event)" style="display:inline-block;">
    <img src="avatar.png" alt="bike" width="64" height="64">
  </button>
    <p id="bikeHornAmount" style="display:inline-block;">0</p>
  </div>
</body>

</html>

使用oncontextmenu =“ return false;”我只是避免在右键单击上显示contextMenu。 “ DoWork”功能接收鼠标按下事件，根据event.button的值，您可以确定进行了哪种单击。使用document.getElementById函数可以找到段落对象，而使用innerHtml可以更改为段落包装的值。您应该看到与其他解决方案略有不同，因为这种解决方案仅适用于mouse down事件。希望你能继续！

如何用鼠标左键单击将对象的值加1，用鼠标右键单击减1

4 个答案: