help with various DIV and creation

1

My code is the following and works perfectly, besides that there is more div, but I want to add a button that is called "Add new room" and when I press it I want to create another one in the body similar to the code What is present Is it possible to do that? If so, more or less how could I elaborate it?

<script type="text/javascript">
  function sig(){
    var array = new Array(" Disponible ", " Ocupado ", " Mantenimiento ",);
    for (i = 0; i < array.length; i++) {
      if(document.getElementById('Fmbtn').value == array[i]) {
        var indice = (i + 1 == array.length) ? 0 : i + 1;
        document.getElementById('Fmbtn').value = array[indice];
        localStorage.setItem("estado", array[indice]);
        break;
       }
    }
   }
   window.onload=function()
  {

  if(localStorage.getItem("estado") != null) {
    estado =localStorage.getItem("estado");         
    document.getElementById('Fmbtn').value = estado;            
  }
}

HTML:

<div class="row" style="text-align:center">
<div class="span2">
<div class="well well-small">
  <h4>Habitación 1</h4>
  <input id="Fmbtn" type="button" value=" Disponible " onclick="sig()" />
  <a href="habitacion1.php"><small>Ver detalles</small></a>
  </div>
</div>
    
asked by Eduardo Ortiz 15.07.2018 в 23:13
source

3 answers

0

You can create with createElement and then give it a css class so that it acquires your style that you want to put it.

var i = 0;

function sig() {

  var array = new Array(" Disponible ", " Ocupado ", " Mantenimiento ");
  if (i + 1 < array.length) {
    i++;
    crearDivs(array[i], array);
  } else {
    i = 0;
    crearDivs(array[i], array);
  }
}

function crearDivs(nameDiv, array) {
  let divNuevo = document.createElement('div');
  divNuevo.classList.add('divs');
  divNuevo.innerHTML = nameDiv;
  
  document.getElementById('container').appendChild(divNuevo);
  document.getElementById('Fmbtn').value = array[i];
}
.divs {
  float: left;
  width: 100px;
  height: 50px;
  background: red;
  margin-left: 20px;
  color: blue;
}
<div class="row" style="text-align:center">
  <div class="span2">
    <div class="well well-small">
      <h4>Habitación 1
      </h4>
      <input id="Fmbtn" type="button" value=" Disponible " onclick="sig()" />
    </div>
  </div>

  <div id='container'></div>
    
answered by 16.07.2018 / 00:02
source
1

from the JS function where you put the button to the listener you create the elements something like this ...

 let nuevoElemento = document.createElement('li');

research on document.createElement('etiqueta que quieres crear');

and thus you will create everything.

I hope you srirva and marques as a solution By: JJ

    
answered by 15.07.2018 в 23:22
1

Well it would be something similar, seeing the code that I put first and this, I have several div that is the one below, the number 12 is the last, they all have the available button that what it does is change to busy-maintenance. I added what you have put me, which is the last line of the code another button out of all the div that I already have, when I add room I get the other room next to the number 12 (I edit the code you passed me then leaves room 13,14,15 etc and so) but the div in white, can you do that when you add and exit room 13 the button automatically come out that others have?

<div class="span2">
<div class="well well-small">
<h4 >Habitación 12</h4>
<input id="este12" type="button" value=" Disponible " onclick="sig12()" />
<br>
<a href="habitacion1.php"><small>Alquilar</small></a>
</div>
</div>
<center><input id="crear1" type="button" value=" Añadir habitación " 
onclick="crear()" /></center>
    
answered by 16.07.2018 в 02:00