JavaScriptで3つの画像から選択できる方法

方法1: ラジオボタンを使用する方法

HTMLコード:

<input type="radio" name="image" value="image1">
<img src="path/to/image1.jpg"><br>
<input type="radio" name="image" value="image2">
<img src="path/to/image2.jpg"><br>
<input type="radio" name="image" value="image3">
<img src="path/to/image3.jpg"><br>
<button onclick="selectImage()">選択</button>

JavaScriptコード:

function selectImage() {
  var selectedImage = document.querySelector('input[name="image"]:checked').value;
  // 選択された画像の値を取得
  console.log("選択された画像: " + selectedImage);
}

方法2: ドロップダウンメニューを使用する方法

HTMLコード:

<select id="imageSelect">
  <option value="image1">画像1</option>
  <option value="image2">画像2</option>
  <option value="image3">画像3</option>
</select>
<button onclick="selectImage()">選択</button>

JavaScriptコード:

function selectImage() {
  var selectElement = document.getElementById("imageSelect");
  var selectedImage = selectElement.value;
  // 選択された画像の値を取得
  console.log("選択された画像: " + selectedImage);
}

方法3: ボタンをクリックして画像を切り替える方法

HTMLコード:

<img id="displayImage" src="path/to/image1.jpg"><br>
<button onclick="changeImage('path/to/image1.jpg')">画像1</button>
<button onclick="changeImage('path/to/image2.jpg')">画像2</button>
<button onclick="changeImage('path/to/image3.jpg')">画像3</button>

JavaScriptコード:

function changeImage(imagePath) {
  var displayImage = document.getElementById("displayImage");
  displayImage.src = imagePath;
  // 選択された画像を表示
  console.log("選択された画像: " + imagePath);
}

これらの方法を使用すると、3つの画像の中からユーザーが選択できます。それぞれの方法には異なるアプローチがありますので、必要に応じて適切なものを選択してください。以上のコード例を参考にしてみてください。ご質問があればお答えします！