Question

Views

I am attempting a create an element in the js file which will then be added to the html div where the game is

I am trying to make a createMine function that creates a new element with the style in .mine and then adds it the the html game div.

var newMine = document.createElement("div");
newMine.classList.add(".mine");
document.getElementById("game").appendChild(newMine);

.mine {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: relative;
  display: inline;
}

<div id="game">
  <button id="startButton">Click To Start</button>
  <div id="gameElements">
    <div id="character">
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza

var newMine = document.createElement("div");
newMine.classList.add("mine");
document.getElementById("game").appendChild(newMine);

.mine{
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    display: inline-block;
}

<div id="game">
    <button id="startButton">Click To Start</button>
    <div id="gameElements">
        <div id="character"></div>
    </div>
</div>

when using classlist, don't write a dot at the beginning to make it work. and as @connexo said, use inline-block

about 4 years ago · Juan Pablo Isaza Report

Answer question

Accepted Answer · 2022-07-05T12:06:14.715Z

Your code is working properly except two problems:

newMine.classList.add(".mine"); should be newMine.classList.add("mine"); (don't use the . when adding the class, its only purpose is to tell CSS that the following is a CSS class).
Elements that have display: inline don't accept height or width. Use display: inline-block instead.