Access sub div JavaScript

0
<div class="container">
  <div class="card-deck mb-3 text-center">
     <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Lights</h4>
      </div>
      <div class="card-body">
        <div id="relay">

        </div>
      </div>
    </div>
</div>
</div>

This is my HTML, and I plan to add a button in the div relay , but I do not know how to access it with javascript.

My javascript is something like this

if(1 == 1){ //ignorem esta comparação
    document.getElementById('relay').innerHTML='<button type='button'  class='btn btn-lg btn-block btn-outline-danger'>OFF</button>';
}else{ 
    document.getElementById('relay').innerHTML='<button type='button' class='btn btn-lg btn-block btn-outline-success'>ON</button>';
}
    
asked by anonymous 18.04.2018 / 20:19

1 answer

3

You have to use double quotation marks to delimit the string, since within it you are using single quotation marks:

...="<button type='button'  class='btn btn-lg btn-block btn-outline-danger'>OFF</button>";
    ↑                                                                                   ↑

In this line too:

...="<button type='button' class='btn btn-lg btn-block btn-outline-success'>ON</button>";
    ↑                                                                                  ↑

Or you would have to escape all the single quotation marks of the string, which is not the best way out:

...='<button type=\'button\' class=\'btn btn-lg btn-block btn-outline-success\'>ON</button>';
    
18.04.2018 / 20:23