[解決済み] ボタンで数字を1つずつ上げる方法(Javascript)
2022-02-09 01:28:26
質問
javascriptについて非常に混乱しており、どのようにこの数字を上昇させるのか、もし教えていただけると助かります。(私はjavascriptに少し慣れていないので、これが意味をなさないなら申し訳ありません、もっと提供する必要があるならコメントで教えてください。)
コード
<head>
<div class="center">
<h1 id="title">
This number will increase.
</h1>
<p id="button">
0
</p>
<a
class="button"
style="text-decoration: none; color: black; font-family: calibri;"
id="numbergoup"
onclick="myFunction()"
>Number go up</a
>
</div>
<script>
function myFunction() {
}
</script>
<style>
#button {
border-style: solid;
padding: 20px;
}
div.center {
text-align: center;
}
#numbergoup {
background-color: tomato;
padding: 20px;
position: absolute;
top: 20%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
</html>```
解決方法は?
このようにすればいいのです。
function myFunction(){
const numberElement = document.getElementById("button");
const number = parseInt(numberElement.innerText, 10) + 1;
numberElement.innerText = number;
}
<button id="button">0</button>
<button onclick="myFunction()">Number go up</button>
関連
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】 \u003C とは何ですか?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptでカンマを桁区切りにして数値を表示する方法
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】パッシブイベントリスナー内部でpreventDefaultができない
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか?
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み] テスト
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】Vueが定義されていない