JS Multi-parameter function that returns an HTML

Asked

Viewed 194 times

1

Updated: Based on SAM’s answer, let me clarify what I need. Considering only JS, I want a variable that saves a text as follows:

var x = "any text"+function(y parameters)+"plus a little text and the cited function returns a text"

It is possible for a variable to save a text generated by a function by concatenating with other texts?

Good morning, everyone! I am making JS an Array and each "cell" of this array contains a huge HTML code. I did this so that every "radio" I choose in my HTML would change the content next to it.

But the code of each array is getting very long and ugly on the screen, tiring to do and to keep as well. So I thought to pass everything to a function, since a lot of the HTML code repeats and only what changes I would pass as parameter to the function.

Then my array would contain a text + function(x parameters) and this array would be passed to an ID of my HTML by the Document.getElementById() command. innerHTML;

var racetrees = racetree[12];
racetree[2] = 
"<table class='enh_tear'>\
	<tr>\
	<td rowspan='2' class='icon_enh'><img src=img/enh_tree/enh_tree_ambidexterity.jpg></td>\
	<td colspan='4'><strong>Ambidexterity:</strong> You gain +1 to hit when dual-wielding or fighting unarmed.\
	Tier 2: Also gaisn +1% Dodge. Tier 3: Algo gains +1 damage.</td>\
<tr>\
	<td class='ap_cost'>AP Cost: 1</td>\
	<td class='level'>Ranks: 3</td>\
	<td class='progression'>Progression: 5</td>\
	<td class='requeriments'>Requires: Two Weapon Fighting (FEAT)</td>\
</tr>\
</table>"

function racetree(index){
document.getElementById("racetreetext").innerHTML = racetree[index];
}
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>Builder</title>
        <link rel="stylesheet" type="text/css" href="css/layout.css">
        <script type="text/javascript" src="JS/racetype.js"></script>
    </head>
<body>
<section id="racetype">
	<p><input type="radio" name="race" onclick="racetree(0);">Aasimar</p>
</section>
	<section id="racetree">
	<span id="racetreetext"></span>
</section>
</body>
</html>

I want to pass as parameter only the name of the image file, leaving the pre-written path in the function, the name inside the tag "Strong", the text after that tag in another parameter, the "1" of AP cost, the "3" of Ranks, etc...

How I would do this function, and how I would pass a long text as a parameter in a function?

javascript html

1 answer

0

Create an object with all strings (image and text names) separated by section and numbered, in this way:

var dados = {
   imagens: {
      1: "enh_tree_ambidexterity.jpg",
      2: "enh_tree_ambideity2.jpg"
   },

   strong: {
      1: "Ambidexterity",
      2: "Ambiterity2"
   },

   strongtxt: {
      1: "You gain +1 to hit when dual-wielding or fighting unarmed.",
      2: "You gain +2 to hit unarmed."
   },

   requires: {
      1: "Bla bla bla",
      2: "Two Weapon Fighting (FEAT)"
   }
}

That object dados (can give the name you want) will be used as source from where you will take the information to be concatenated in the table within the function. This way, the only thing you need to pass as a parameter to the function are numbers, making the process much easier to write and manage. In the onclick you will pass only the numbers referring to the die you want to pull from the object dados.

Behold:

var dados = {
   imagens: {
      1: "enh_tree_ambidexterity.jpg",
      2: "enh_tree_ambidexterity2.jpg"
   },
   
   strong: {
      1: "Ambidexterity",
      2: "Ambidexterity2"
   },
   
   strongtxt: {
      1: "You gain +1 to hit when dual-wielding or fighting unarmed.",
      2: "You gain +2 to hit when dual-wielding or fighting unarmed."
   },

   requires: {
      1: "Bla bla bla",
      2: "Two Weapon Fighting (FEAT)"
   }
}


function racetree(img, str, strtxt, cost, rks, prog, req){

   img = dados.imagens[img]; // imagem
   str = dados.strong[str]; // texto tag strong
   strtxt = dados.strong[strtxt]; // texto após tag strong
   req = dados.requires[req]; // texto de "Requires"

   var tab = "<table class='enh_tear'>\
      <tr>\
      <td rowspan='2' class='icon_enh'><img src=img/enh_tree/"+ img +"></td>\
      <td colspan='4'><strong>"+ str +":</strong> "+ strtxt +"\
      Tier 2: Also gaisn +1% Dodge. Tier 3: Algo gains +1 damage.</td>\
   <tr>\
      <td class='ap_cost'>AP Cost: "+ cost +"</td>\
      <td class='level'>Ranks: "+ rks +"</td>\
      <td class='progression'>Progression: "+ prog +"</td>\
      <td class='requeriments'>Requires: "+ req +"</td>\
   </tr>\
   </table>";

   document.getElementById("racetreetext").innerHTML = tab;
}
<p><input type="radio" name="race" onclick="racetree(1,1,1,1,3,5,2);">Aasimar</p>
<span id="racetreetext"></span>

  • Got it! Thank you very much! However, I will need to create several tables like this one, and I wanted to call only one function in html. So I wanted this function that you created there to feed a variable. so I can call this variable with all tables to html with a smaller function.

  • Blz. The answer was just an idea that might be useful. Thanks!

Browser other questions tagged javascript html

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