Home / Questions / 362646
Accepted
Javier fr
Asked: 2020-06-06 07:39:24 +0800 CST 2020-06-06 07:39:24 +0800 CST

Concatenate variable to html in Javascript

  • 772

Hello, good morning, I have a problem when I want to pass my variable to the function as a parameter. I attach my code.

Code

var fruta = "hola";

var html = '';
                          html += "<div class='card direct-chat direct-chat-primary'>"+
                            "<div class='card-header'>"+
                              "<h3 class='card-title'>Comentarios</h3>"+
                            "</div>"+
                            "<div class='card-body'>"+
                              "<div class='direct-chat-messages'>"+

                                comentarios+

                              "</div>"+
                            "</div>"+

                            "<div class='card-footer'>"+
                              "<form>"+
                                "<div class='input-group'>"+
                                  "<input type='text' id='form-input-comentario' name='message' placeholder='Comentario ...' class='form-control'>"+
                                  "<span class='input-group-append'>"+
                                    "<button type='button' class='btn btn-primary' onclick='set_comentario_ajax("+frutas+");'>Enviar</button>"+
                                  "</span>"+
                                "</div>"+
                              "</form>"+
                            "</div>"+
                          "</div>"+

                          "<div class='custom-file'>"+
                            "<input type='file' class='custom-file-input' id='customFile'>"+
                            "<label class='custom-file-label' for='customFile'>Seleccione</label>"+
                          "</div>";
                          $('#form-ticket-comentarios').html(html);

Function I want to call

function set_comentario_ajax(data){
  var porId = document.getElementById("form-input-comentario").value;
  alert(porId);
  console.log(data);
}

Mistake

ReferenceError: hello is not defined Tickets:1:1

I guess I'm wrongly concatenating my variable "fruits" as a parameter to the function

javascript

3 Answers

  1. Best Answer

    Avoid concatenating content, it is always the source of errors like the one you have now, instead, use text templates , enclosing the content between backticks and` , each time you need to include a variable, you only need${nombre_de_variable}

    var fruta = 'hola';
var comentarios = '<p>Comentario 1</p><p>Comentario 2</p><p>Comentario 3</p>';

var html = "";
                          html += `<div class="card direct-chat direct-chat-primary">
                            <div class="card-header">
                              <h3 class="card-title">Comentarios</h3>
                            </div>
                            <div class="card-body">
                              <div class="direct-chat-messages">

                                ${comentarios}

                              </div>
                            </div>

                            <div class="card-footer">
                              <form>
                                <div class="input-group">
                                  <input type="text" id="form-input-comentario" name="message" placeholder="Comentario ..." class="form-control">
                                  <span class="input-group-append">
                                    <button type="button" class="btn btn-primary" onclick="set_comentario_ajax('${fruta}');">Enviar</button>
                                  </span>
                                </div>
                              </form>
                            </div>
                          </div>

                          <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile">
                            <label class="custom-file-label" for="customFile">Seleccione</label>
                          </div>`;
                          $("#form-ticket-comentarios").html(html);

function set_comentario_ajax(valor) {
    console.log(valor);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form-ticket-comentarios"></div>

    • 1

  2. The problem is that you are sending a variable that does not exist in the html, so you should add some quotes,

    To be specified from JavaScript as a string

    I also recommend you use ${} inside where you want to insert a variable, it must go inside these quotes (``)

      `<button type="button" class="btn btn-primary" onclick="set_comentario_ajax('${fruta}')">Enviar</button>`

    It is not necessary to use ";" on click

    • 1

  3. Try adding the parameter with single quotes:

        html += "<div class='card direct-chat direct-chat-primary'>"+
  "<div class='card-header'>"+
    "<h3 class='card-title'>Comentarios</h3>"+
  "</div>"+
  "<div class='card-body'>"+
    "<div class='direct-chat-messages'>"+

      comentarios+

    "</div>"+
  "</div>"+

  "<div class='card-footer'>"+
    "<form>"+
      "<div class='input-group'>"+
        "<input type='text' id='form-input-comentario' name='message' placeholder='Comentario ...' class='form-control'>"+
        "<span class='input-group-append'>"+
          "<button type='button' class='btn btn-primary' onclick='set_comentario_ajax(\'"+frutas+"\');'>Enviar</button>"+
        "</span>"+
      "</div>"+
    "</form>"+
  "</div>"+
"</div>"+

"<div class='custom-file'>"+
  "<input type='file' class='custom-file-input' id='customFile'>"+
  "<label class='custom-file-label' for='customFile'>Seleccione</label>"+
"</div>";
    • 0