Producing html using javascript difficulties

Question

Currently have problem when I produce html using a javascript. Below is my code:

html:

<div id="result"></div>

javascript:

var html = '';          
for(var i=0; i < 2; i++){
    html += '<button onclick="#" class="btn btn-default kiosk_btn">button</button>'
}         
$( "#result" ).html( html );

css:

.kiosk_btn{font-size: 4vmin; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vmin; height:8vmin; width:80vmin; color:white;}
.kiosk_btn:active{outline: none; text-decoration: none;}
.kiosk_btn:focus{outline: none; text-decoration: none; }
.kiosk_btn:hover{text-decoration: none; background-color: #213140; color:white;}

JSFIDDLE

I'm using the bootstrap buttons. The buttons will become white after pressing it. It is supposed to go back to original color after pressing it.

If I straightaway write the button as html coding instead of using javascript, it will not have such problem. Do you guys have any ideas how to solve this?

Aroniaina · Accepted Answer · 2015-10-15 09:34:34Z

1

This is caused by the bootstrap CSS rule

.btn-default:focus {
    ...
}

There are two solutions.

1st solution : use !important on kiosk_btn color and backroud-color, be carefull about it.

.kiosk_btn{font-size: 4vmin; background-color: #141E26 !important; border:none; box-shadow: 5px 5px 5px black; margin: 2vmin; height:8vmin; width:80vmin; color:white !important;}

2nd solution, override the bootstrap css rule

.kiosk_btn:focus{outline: none; text-decoration: none; background-color: #141E26;color:white;}

answered Oct 15, 2015 at 9:34

Aroniaina

1,25213 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-10-15 09:26:11Z

I think the problem is the focus rule, just override it

.kiosk_btn:focus {
    outline: none;
    text-decoration: none;
    background-color: #141E26;
    color:white;
}

var html = '';
for (var i = 0; i < 2; i++) {
  html += '<button class="btn btn-default kiosk_btn">button</button>'
}

$("#result").html(html);

.kiosk_btn {
  font-size: 4vmin;
  background-color: #141E26;
  border: none;
  box-shadow: 5px 5px 5px black;
  margin: 2vmin;
  height: 8vmin;
  width: 80vmin;
  color: white;
}
.kiosk_btn:active {
  outline: none;
  text-decoration: none;
}
.kiosk_btn:focus {
  outline: none;
  text-decoration: none;
  background-color: #141E26;
  color: white;
}
.kiosk_btn:hover {
  text-decoration: none;
  background-color: #213140;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Telokis · Accepted Answer · 2015-10-15 09:30:51Z

0

Once you've clicked on the button, it becomes focused.

And Bootstrap defined this :

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad
}

Just overload your .kiosk_btn:focus and it should fix the problem.

By the way, I get the same problem when adding the buttons "manually" in the html.

answered Oct 15, 2015 at 9:30

Telokis

3,38916 silver badges38 bronze badges

Collectives™ on Stack Overflow

Producing html using javascript difficulties

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related