Javascript 选择框 - 使图像出现而不是文本

Question

我目前有 2 个选择框，第一个下拉选择框然后填充第二个选择框。一旦您选择了两个选项，就会出现一个 GO 按钮，根据您的选择将您带到一个链接。我希望能够将此 GO 按钮从文本更改为图像。它的样式如下:

     if (!goButton) {
    //If the element doesn't exist, make it.
    goButton = document.createElement('button1');
    goButton.innerHTML = "Go!";
    goButton.style.display = "inline-block";
    goButton.style.fontWeight = "500";
    goButton.style.fontcolor = "white";
    item.parentNode.appendChild(goButton); //add it to the parent of the item argument.
    goButton.setAttribute('onclick', 'goButtonGo()');
    goButton.setAttribute('id', 'go-button');
  } else {
    //If it does exist, make sure you can see it.
    goButton.style.display = 'inline-block';
  }
}

任何帮助将不胜感激，谢谢!

Answer 1

用你的按钮，你可以设置一个background-image .

var button = document.createElement('button1');
button.style.display = "inline-block";
button.style.backgroundImage = 'url(https://codepo8.github.io/canvas-images-and-pixels/img/horse.png)';
button.style.backgroundSize = 'cover';
button.style.width = '100px';
button.style.height = '100px';
document.getElementById('box').appendChild(button);

<div id="box"></div>

您还可以创建一个 <input type="image">元素

var button = document.createElement('input');
button.type = 'image';
button.src = 'https://codepo8.github.io/canvas-images-and-pixels/img/horse.png';
document.getElementById('box').appendChild(button);

<div id="box"></div>