How to make a function that "calls" an html

Asked

Viewed 50 times

-2

I’m improving on html and Javascript while creating my own project. I don’t know if my question is correct, but I’ll be explaining it in the best way.

I’m creating a tool to help combat turns in table RPG, for this I’m using html and css to create cards containing information of characters and monsters, only the code ends up getting huge and with many repeated lines.

Cards are following this pattern:

<!-- Iniciando o card -->
 <div class="boards">
   <div class="board">
     <h3> 1º </h3>
     <input placeholder="Nome" class="inpNome">
     <div class="dropzone">
       <div class="card" draggable="true">
         
 <!-- Informações dentro do card -->
         <img src="" alt="" width="260" height="200">

         <div class="areaSaude">
           <button class="btnDano">Dano</button>
           <input type="number" min="0" class="inpValor">
           <button class="btnCura">Cura</button>
         </div>

         <div class="area">
           <div class="status">
             <div class="status-life"></div>
             <div class="grid-barra">
                <div class="heartLifeBar"> 
                  <img id="heart" src="./view/imagens/heartLifeBar.png" alt="coração" />
                </div>
                <div class="total">
                  <input placeholder="0" class="varLife">
                  <span class="spnBar">/</span>
                  <input placeholder="0" class="lifeTotal">
                </div>
             </div>
           </div>
         </div>

         <div class="area">
           <div class="status">
             <div class="status-shield"></div>
             <div class="grid-barra">
                <div class="shieldMob"> 
                  <img id="EscudoMob" src="./view/imagens/shield.svg" alt="Escudo" />
                </div>
                <div class="total-shield">
                 <input placeholder="0" class="varEscudo">
                 <span class="spnBar">/</span>
                 <input placeholder="0" class="escudoTotal">
                </div>
             </div>
           </div>
         </div>

         <div class="containerSentido">
             <div class="sentidos">
                 <img class="sentido1" src="./view/imagens/senses.svg" alt="Sentidos" />
                     <div class="percepcao">Perception</div>
                     <div class="numPercepcao">15</div>
                 <img class="sentido1" src="./view/imagens/senses.svg" alt="Sentidos" />
                     <div class="percepcao">Investigation</div>
                     <div class="numPercepcao">12</div>
                 <img class="sentido1" src="./view/imagens/senses.svg" alt="Sentidos" />
                     <div class="percepcao">Insight</div>
                     <div class="numPercepcao">13</div>
              </div>
         </div>  

<!-- Fim do conteúdo -->

     </div>
   </div>
 </div>
 </div>
<!-- Fim do card -->

With this I was thinking of a way to save the information of the ready mobs in another file to decrease the size of the code. Type have multiple html files containing information from different mobs, example: minotaur.html, goblin.html ..., and leave only the empty card in the main code ready to receive information from the monster or character by clicking a button. Thus:

<!-- Iniciando o card -->
  <div class="boards">
    <div class="board">
      <h3> 6º </h3>
      <input placeholder="Nome" class="inpNome">
      <div class="dropzone">
        <div class="card" draggable="true">

       <!-- Informações dentro do card -->
          
         <button onClick="puxar informações">    

       <!-- Fim do conteúdo -->  

        </div>
      </div>
    </div>
  </div>
 <!-- Fim do card -->

I accept tips on how to improve code, how to solve the problem, links to study.

javascript html

  • Apparently you can use the template and the slot: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots.

1 answer

-1

All right? Let’s see, from what I understand you want to press a button and change the html information, right? If that’s what you want to do, I can give you an example:

<html>
<body>

<h2>carta</h2>

<p>Dano:</p><b id="damage"></b>

<button type="button" onclick='document.getElementById("damage").innerHTML = "110"'>monstro 1</button>

<button type="button" onclick='document.getElementById("damage").innerHTML = "250"'>monstro 2</button>

</body>
</html>

  • It’s more to take the code snippet containing card information in another html file and render it on the card. But what you said tbm is very useful.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.