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

在Javascript中将变量连接到html

  • 772

您好，早上好，我想将变量作为参数传递给函数时遇到问题。我附上我的代码。

代码

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 set_comentario_ajax(data){
  var porId = document.getElementById("form-input-comentario").value;
  alert(porId);
  console.log(data);
}

错误

ReferenceError: hello is not defined Tickets:1:1

我想我错误地将我的变量“fruits”作为函数的参数连接起来

javascript

3 Answers

  1. Best Answer

    避免连接内容，它总是像现在这样的错误的来源，而是使用文本模板，将内容括在反引号和`之间，每次需要包含一个变量时，你只需要${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. 问题是您发送的变量在 html 中不存在，因此您应该添加一些引号，

    从 JavaScript 中指定为字符串

    我还建议您在要插入变量的地方使用 ${}，它必须放在这些引号内（``）

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

    不必使用“；” 点击

    • 1

  3. 尝试用单引号添加参数：

        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