如何使用javascript将无线电输入值转换为img src以构建自定义图像？

Question

我是一名学生，对Java语言还是陌生的。我正在尝试建立一个小的像素“建立自己的仓鼠！”游戏。由于无法获得用户输入来更改基础仓鼠图像的外观，因此我目前仍停留在图像的实际构建上。

我已经尝试过在代码中移动以更改src，但是只要它不在buildHamster函数中，则位置似乎并不重要。我尝试将select和options转换为输入单选，但是那也不起作用。

html

  <h3>Color</h3>
  <input type="radio" name="maincolor" id="maincolor" value="solid" checked="checked">
    Solid <select name="solid">
      <option value="solidblack">Black</option>
      <option value="solidbrown">Brown</option>
      <option value="solidcream">Cream</option>
      <option value="">White</option>
      <option value="soliddove">Dove</option>
    </select>
  </input>

  <br>

  <input type="radio" name="maincolor" id="maincolor" value="banded">
    Banded <select name="banded">
      <option value="bandedblack">Black</option>
      <option value="bandedbrown">Brown</option>
      <option value="bandeddove">Dove</option>
      <option value="bandedgreybrown">Grey Brown</option>
      <option value="bandedlightbrown">Light Brown</option>
      <option value="bandeddust">Dust</option>
    </select>
  </input>

  <br>

  <input type="radio" name="maincolor" id="maincolor" value="other">
    Other <select name="other">
      <option value="golden">Golden</option>
      <option value="grey">Grey</option>
      <option value="tricolor">Tricolor</option>
      <option value="tortdove">Dove Tort</option>
      <option value="tortbrown">Brown Tort</option>
      <option value="tortbrownbanded">Brown Banded Tort</option>
      </select>
  </input>


  <h3>Eye Color</h3>
  <input type="radio" name="eyes" value="red" checked="checked">Red</input><br>
  <input type="radio" name="eyes" value="darkRed">Dark Red</input><br>
  <input type="radio" name="eyes" value="black">Black</input>

  <h3>Name</h3>
  <button onclick="addName()">Enter name</button>
  <br><br>
  <button onclick="buildHamster()">Build a hamster!</button>

javascript

let box = document.querySelector('#box');

function setValues() {  
  let color;
  let eyes = document.getElementById("eyes").value;
  let maincolor = document.getElementById("maincolor").value;  
    if(maincolor = "solid") {
      color = document.getElementById("solid").value;
    }
    if(maincolor = "banded") {
      color = document.getElementById("banded").value;
    }
    if(maincolor = "other") {
      color = document.getElementById("other").value;
    }
  let sex = document.getElementById("sex").value;

  document.getElementById("color").src = `img/${color}.png`;
  document.getElementById("eyes").src = `img/${eyes}.png`;
}


function addName() {
  let name = prompt("Write your hamster's name!", "Spooky");
}





function buildHamster() {
  document.querySelector("#box").innerHTML = `<img id="outline" src="img/outline.png">
  <img id="eyes" src="">
  <img id="color" src="">
  <img id="base" src="img/base.png">`;
}

可以显示基础图像和轮廓图像，所以buildHamster函数本身不是问题。我希望它要做的是，当选中单选按钮和选择选项时，更改毛发和眼睛的颜色（所有图像没有颜色时所有图像都是透明的，即没有任何东西阻止其他不应该发生的事情） 。

Answer 1

我建议您通过添加使用jquery

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

以您的代码开头，然后可以在您的javascript文件中执行

$('#id').css("background-image", "url(/myimage.jpg)");
or 
$('#id').css("background-color", "red");