How to style a dynamically created button with javascript?

Question

I am trying to add a button using .js to my HTML. That button is supposed to show up everytime I click on another button (with the id "imageChoose") which loads the preview of an image. The new button(id: removeBttn) is a delete button, it deletes the image and then it disappears This is the html code:

 <div class="row fileinput-control">
            <img id="preview"  src="default5.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
            <br/>
            <input type="file" id="image" style="display: none;" />
            <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
            <a href="javascript:changeProfile()">
                <div class="file-btns">
                    <span class="btn btn-default btn-file" id="imageChoose">
                        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
            </a>        
            <a id="removeBttnFrame" href="javascript:removeImage()">    
            </a>

            </div>
        </div>

The below .js code is adding that button along with some styling:

function    addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
    removeBttn.class="removeBttnClass";
    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

.removeBttnClass  {
    position: absolute;
  top:91%;
  left: 22.7%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
color: black;
  text-align: center;
  border-color: lightgray;
   height: 50px ! important;
    width: 53px;
    border-radius: 4px;
      padding: 10x 17px;
    border-width: thin
}

The above function is not working properly: The button shows up as expected but without the styling. The .css is completely ignored for some reason. I'm new to HTML and cant figure it out.It looks like others have asked similar questions at How to dynamically create CSS class in JavaScript and apply? and here :How to style dynamically created elements with CSS.. These didn't really help me though. how can I do it?

Please post the actual error you get. Also, consider having your css in an actual css file and applying the class like you're already doing. — Brett Jeffreson, Oct 17 '19 at 02:26

score 2 · Accepted Answer · answered Oct 17 '19 at 03:18

2

Instead of using removeBttn.class you should use removeBtn.className

answered Oct 17 '19 at 03:18

ChickenSoups

937
8
18

Steve Whitmore · Answer 2 · 2019-10-17T03:38:57.103

Why not just toggle a class on the remove button so that it's hidden from the DOM when clicked and visible when "imageChoose" is clicked?

You can do this by adding a function to the "imageChoose" button that toggles a css class name to "removeBttn"

function loadPreviewImage() {
  // your code here to load preview. below is dummy to demonstrate
  const previewImageDiv = document.querySelector('#preview-image');
  previewImageDiv.classList.remove('hide');
}

function removePreviewImage() {
  const previewImageDiv = document.querySelector('#preview-image');
  
  previewImageDiv.classList.toggle('hide');
}

#preview-image.hide {
  display: none;
}
#preview-image {
  display: block;
  width: 200px;
  position: relative;
}
#remove-button {
  position: absolute;
  right: 0;
}
img {
  max-width: 200px;
}

 <div class="row fileinput-control">
  <button id="image-choose" type="button" onclick="loadPreviewImage()">Load Preview</button>
  
  <div id="preview-image">
    <button id="remove-button" 
            type="button" 
            title="remove preview" 
            onclick="removePreviewImage()">x</button>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F66%2FLagothrix_lagotricha4.JPG%2F1200px-Lagothrix_lagotricha4.JPG&f=1&nofb=1" alt="monkey" title="monkey" />
  </div>
</div>

I would also change "imageChoose" to a button element instead of an anchor tag. Buttons trigger actions on the page and anchor tags take you places. This is an accessibility standard.

score 0 · Answer 3 · answered Oct 17 '19 at 03:58

You can change your javascript to this and it gonna work.

function addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.removeBttnClass  { position: absolute; top:91%;'
    +'left: 22.7%transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);'
    +'background-color: white;cursor: pointer;border-radius: 5px;color: black;'
    +'text-align: center;border-color: lightgray;height: 50px ! important;'
    +'width: 53px;border-radius: 4px;padding: 10x 17px;border-width: thin}';
    document.head.appendChild(style);
    removeBttn.className="removeBttnClass";

    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

How to style a dynamically created button with javascript?

3 Answers3