Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTMLで簡単に数値のプラスボタンとマイナスボタンを作る

Last updated at Posted at 2024-10-31

意外と知らない方が多いと思いますが、JavaScirptで自作しなくても簡単にできます。
便利ですね!

<a id="minus" class="number-control">-</a>
<input type="number" id="number" value="5.0" max="10" min="1" step="0.1" />
<a id="plus" class="number-control">+</a>
document.getElementById("minus").addEventListener("click", (event) => {
    document.getElementById("number").stepDown();
});
document.getElementById("plus").addEventListener("click", (event) => {
    document.getElementById("number").stepUp();
});

stepUpとstepDownは以下のtypeで使えます。

  • number
  • range
  • date
  • month
  • week
  • time

詳しくはこちら
https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/stepUp

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
masaki-engineer

@masaki-engineer

エンジニア6年目のフリーランスエンジニア。 HTML、CSS、JavaScript、Java辺りがメイン。 好奇心旺盛でいろいろ手を出してます。 ブログやってます。

Comments

diywmk9
@diywmk9

意外と知らない方が多いと思いますが、JavaScirptで自作しなくても簡単にできます。

JavaScirptで自作しなくても簡単に を売りにするのなら、onclick要素に直接書いてしまえばより簡単かと。

<a onclick='number.stepDown()'>-</a>
<input type='number' id='number' value='5.0' max='10' min='1' step='0.1'>
<a onclick='number.stepUp()'>+</a>

0

Let's comment your feelings that are more than good

Qiita Conference 2024 Autumn will be held!: 11/14(Thu) - 11/15(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

Takahiro Anno, Masaki Fujimoto, Yukihiro Matsumoto(Matz), Shusaku Uesugi / Nicolas Ishihara(Vercel Inc.)

View event details

Being held Article posting campaign

1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address