最小値から最大値を入力してボタンを押すとランダムでその範囲から数字が出るHTMLを教えてください

1件の回答

回答を書く

1100298

2026-04-10 09:50

+ フォロー

\u0026lt;!DOCTYPE html\u0026gt;

\u0026lt;html lang=\u0026quot;ja\u0026quot;\u0026gt;

\u0026lt;head\u0026gt;

\u0026lt;meta charset=\u0026quot;UTF-8\u0026quot;\u0026gt;

\u0026lt;title\u0026gt;ランダム数字ジェネレーター\u0026lt;/title\u0026gt;

\u0026lt;style\u0026gt;

body { font-family: sans-serif; margin: 20px; }

label { display: inline-block; width: 60px; }

input { margin-bottom: 8px; }

#result { font-size: 1.5em; margin-top: 10px; font-weight: bold; }

\u0026lt;/style\u0026gt;

\u0026lt;/head\u0026gt;

\u0026lt;body\u0026gt;

\u0026lt;h1\u0026gt;ランダム数字ジェネレーター\u0026lt;/h1\u0026gt;



\u0026lt;div\u0026gt;

\u0026lt;label for=\u0026quot;min\u0026quot;\u0026gt;最小値\u0026lt;/label\u0026gt;

\u0026lt;input type=\u0026quot;number\u0026quot; id=\u0026quot;min\u0026quot; value=\u0026quot;1\u0026quot;\u0026gt;

\u0026lt;/div\u0026gt;

\u0026lt;div\u0026gt;

\u0026lt;label for=\u0026quot;max\u0026quot;\u0026gt;最大値\u0026lt;/label\u0026gt;

\u0026lt;input type=\u0026quot;number\u0026quot; id=\u0026quot;max\u0026quot; value=\u0026quot;10\u0026quot;\u0026gt;

\u0026lt;/div\u0026gt;

\u0026lt;button onclick=\u0026quot;generateRandom()\u0026quot;\u0026gt;ランダムに数字を出す\u0026lt;/button\u0026gt;



\u0026lt;div id=\u0026quot;result\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;



\u0026lt;script\u0026gt;

function generateRandom() {

const minInput = document.getElementById('min').value;

const maxInput = document.getElementById('max').value;



const min = Number(minInput);

const max = Number(maxInput);



// 入力チェック

if (isNaN(min) || isNaN(max)) {

document.getElementById('result').textContent = '数値を入力してください。';

return;

}

if (min \u0026gt; max) {

document.getElementById('result').textContent = '最小値は最大値以下にしてください。';

return;

}



// min〜max の整数をランダムに生成

const random = Math.floor(Math.random() * (max - min + 1)) + min;



document.getElementById('result').textContent = 結果: ${random};

}

\u0026lt;/script\u0026gt;

\u0026lt;/body\u0026gt;

\u0026lt;/html\u0026gt;

うったえる有益だ(0シェアするブックマークする

関連質問

Copyright © 2026 AQ188.com All Rights Reserved.

博識 著作権所有