我遵循了以下教程:https://stashable.blog/2018/12/30/make-a-dress-up-game-using-javascript-html-and-css/运行良好，但我想更改一些内容。 本教程只使用一个玩偶，而我有多个玩偶（肤色），所以我把它和其他选项（鞋子、裤子等）一样对待，正因为如此，游戏在开始时看起来是空的。

这是我第一次尝试做这样的事情（嗯，当我10-12岁的时候，我曾经用flash做类似的事情，但我几乎什么都记得，我想它是不同的……)我不知道怎么做我想做的事。我想我必须更改“.css”文件的某些内容，于是我尝试使用:

背景-图像：url（“../img/doll1.png”）；

在#doll{part中，但这不允许按钮更改图像。

我真的迷失在这里，我无法在网上找到任何解决方案或教程。请帮助:(

在此处输入图像说明

顺晟科技：

欢迎使用StackOverflow Blue Dots！

我不清楚你到底想要什么，但据我所知，你想用背景图像改变娃娃，对吗？我们可以使用JavaScript来实现这一点。

我们首先要做的是通过在HTML中分配给文档的ID来获取文档。

var state = {
  a: 0,
  b: 0,
  c: 0
};

function nexthairback() {
  console.log("inside function nexthairback");
  console.log(state.a);
  var hairback = document.getElementById("hairback");
  if (state.a === 0) {
    hairback.setAttribute("class", "hairback1");
    state.a++;
    console.log(state.a);
  } else
  if (state.a === 1) {
    hairback.setAttribute("class", "hairback2");
    state.a = 0;
  }

}

function nextdoll() {
  console.log("inside function nextdoll");
  console.log(state.b);
  var doll = document.getElementById("doll");
  if (state.b === 0) {
    doll.setAttribute("class", "doll1");
    state.b++;
    console.log(state.b);
  } else
  if (state.b === 1) {
    doll.setAttribute("class", "doll2");
    state.b = 0;
  }

}

function nexthairfront() {
  console.log("inside function nexthairfront");
  console.log(state.c);
  var hairfront = document.getElementById("hairfront");
  if (state.c === 0) {
    hairfront.setAttribute("class", "hairfront1");
    state.c++;
    console.log(state.c);
  } else
  if (state.c === 1) {
    hairfront.setAttribute("class", "hairfront2");
    state.c = 0;
  }

}

window.onload = init;

function init() {
  console.log("window has loaded");
  state.a = 0;
  state.b = 0;
  state.c = 0;

}

之后，我们要改变样式，对吗？具体来说，背景图像，我们也可以在JavaScript中实现！

var state = {
  a: 0,
  b: 0,
  c: 0
};

function nexthairback() {
  console.log("inside function nexthairback");
  console.log(state.a);
  var hairback = document.getElementById("hairback");
  if (state.a === 0) {
    hairback.setAttribute("class", "hairback1");
    state.a++;
    console.log(state.a);
  } else
  if (state.a === 1) {
    hairback.setAttribute("class", "hairback2");
    state.a = 0;
  }

}

function nextdoll() {
  console.log("inside function nextdoll");
  console.log(state.b);
  var doll = document.getElementById("doll");
  if (state.b === 0) {
    doll.setAttribute("class", "doll1");
    state.b++;
    console.log(state.b);
  } else
  if (state.b === 1) {
    doll.setAttribute("class", "doll2");
    state.b = 0;
  }

}

function nexthairfront() {
  console.log("inside function nexthairfront");
  console.log(state.c);
  var hairfront = document.getElementById("hairfront");
  if (state.c === 0) {
    hairfront.setAttribute("class", "hairfront1");
    state.c++;
    console.log(state.c);
  } else
  if (state.c === 1) {
    hairfront.setAttribute("class", "hairfront2");
    state.c = 0;
  }

}

window.onload = init;

function init() {
  console.log("window has loaded");
  state.a = 0;
  state.b = 0;
  state.c = 0;

}

您现在必须自己弄清楚如何在单击按钮时实现这一点，以及如何在每次单击按钮时更改图像目录url。祝你好运；）