既に上の方が適切な回答をされておりますが...改めて回答いたしますね！
まずディレクトリ構造を下記のような構成でイメージしてください
File
├ index.html
└ image
├ img1.png
├ img2.png
└ img3.png
index.htmlでimg.1pngの画像を呼び出したいとき、画像のパスは「./image/img1.png」になります。
ですので下記のように組めばご質問者様の意図通り動くのではと思います。
・それぞれの画像のパスを文字列として格納した配列を定義
・出力したランダムな値に応じた、配列の要素をimgタグのsrc属性にセットする
<body>
<div class="container">
<img id="box" src=""></img>
</div>
<button id="btn">ランダムに表示する</button>
/*----------
JS
----------*/
<script>
// ボタンを押すとランダムに値を出し、値に応じてパスを切り替える
const btn = document.getElementById("btn");
// ボタンのクリックイベント
btn.addEventListener("click", () => {
// 画像のパスを格納した配列を定義
const path =["./image/img1.png","./image/img2.png","./image/img3.png"];
// ランダムな値を抽出
const number = Math.floor(Math.random() * 3);
//imgタグのsrc属性に配列の要素を設定
document.getElementById("box").setAttribute("src",path[number]);
});
※補足
パスを切り替えて画像の切り替えを行うより、CSSで表示を切り替えるほうがスムーズな挙動になるのでは...と個人的には思います。
下記参考までにCSSで画像を切り替える案を掲載しておきます。
<body>
<div class="container">
<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
</div>
<button id="btn">ランダムに表示する</button>
<script>
// ボタンを押すとランダムでactiveクラスが付与され、表示(display:block)を行う
const btn = document.getElementById("btn");
// ボタンのクリックイベント
btn.addEventListener("click", () => {
// 初期化
document.querySelectorAll(".box").forEach((e) => {
if (e.classList.contains("active")) {
e.classList.remove("active");
}
});
// ランダムな値を抽出
const number = Math.floor(Math.random() * 3);
// numberの値に応じて条件分岐、activeクラスの付与を行う
console.log(number);
switch (number) {
case 0:
document.querySelector(".first").classList.add("active");
break;
case 1:
document.querySelector(".second").classList.add("active");
break;
case 2:
document.querySelector(".third").classList.add("active");
break;
default:
console.log("Error");
}
});
</script>
