Question

这是我的代码..

 <!DOCTYPE html>
    <html>
     <head>
    <script>
    function generate(){
    document.getElementById("show").style.display = "block";	
    var name = document.getElementById("name").value;
    var school_name = document.getElementById("school_name ").value;
    var school_site= document.getElementById("school_site ").value;

    var content= "<h2>Student Details:</h2>"+"/n"+
    "<div align='justify'>
     <p>"+name+"is studing in "+school_name+"</p>"+"/n"+
    "<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p></div>";
    
    document.getElementById("displayarea").innerHTML = content;
    }
    </script>
     </head>
    <body>
    
      Privacy Policy Page
      <p>Name:</br>  <input type="text" name="name" id="name"></p>
     <p>School Website:</br>  <input type="text" name="school_site" id="school_site"></p>
    <p>School Name:</br>  <input type="text" name="school_name" id="school_name"></p>
    
    <button id="click" onclick="generate()">Generate</button>
    
     <div style="display:none" id="show">
    <div style="height:200px; width:540px; overflow:auto;" id="displayarea">
    
    </body>
</html>

“content”是javascript变量。

我需要将HTML代码指定为“content”变量的值，
我还需要在HTML中添加一些Javascript变量代码，
如何在html超文本链接中添加javascript变量？

Answer 1

在id和school_site`中的school_name中有额外的空间。

所以它没有被识别，你得到了exception。您连接string的语法也不正确。

var school_name = document.getElementById("school_name").value;
var school_site= document.getElementById("school_site").value;

您的完整javascript代码将是这样的

<script>
    function generate(){
        document.getElementById("show").style.display = "block";    
        var name = document.getElementById("name").value;
        var school_name = document.getElementById("school_name").value;
        var school_site= document.getElementById("school_site").value;

        var content= "<h2>Student Details:</h2>"+"/n"+
        "<div align='justify'>"+
         "<p>"+name+"is studing in "+school_name+"</p>"+"/n"+
        "<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p>";

        document.getElementById("displayarea").innerHTML = content;
    }
</script>

Answer 2

您必须使用configparser.py代替＆＃39; / n＆＃39;同时分配给javascript变量。

Answer 3

我看到的问题是你在字符串的中间点击了输入，你在id选择器中有额外的空间。

请勿输入或使用倾斜`来声明字符串而不是引号。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script>
    function generate() {
      document.getElementById("show").style.display = "block";
      var name = document.getElementById("name").value;
      var school_name = document.getElementById("school_name").value;
      var school_site = document.getElementById("school_site").value;

      var content = "<h2>Student Details:</h2>" +
        "<div align='justify'><p>" + name + "is studing in " + school_name + "</p>" +
        "<p>Visit site: <a href='http://" + school_site + "'>http://" + school_site + "</a></p></div>";

      document.getElementById("displayarea").innerHTML = content;
    }
  </script>
</head>

<body>

  Privacy Policy Page
  <p>Name:</br>
    <input type="text" name="name" id="name">
  </p>
  <p>School Website:</br>
    <input type="text" name="school_site" id="school_site">
  </p>
  <p>School Name:</br>
    <input type="text" name="school_name" id="school_name">
  </p>

  <button id="click" onclick="generate()">Generate</button>

  <div style="display:none" id="show">
    <div style="height:200px; width:540px; overflow:auto;" id="displayarea">

</body>

</html>

＆＃13;

建议：不需要为新行使用/ n，h2也是块元素，也不需要中断。

Answer 4

您可以使用template literals在多行上写一个字符串，即使用字符＆＃34; `＆＃34;。

您可以使用模板文字

中的${yourVar}轻松整合变量

示例：

let lit = "literal";
var content = `This string
    uses a template ${lit}`;
console.log(content);

注意：这是一个ES6功能，也就是浏览器尚未完全支持的新JavaScript。要使此代码与旧版浏览器兼容，请使用babel

之类的转录程序

Answer 5

有很多方法可以实现这一目标。对于一个简单的用例，你可以使用一个字符串数组来执行工作，最后你可以加入＆＃34;
＆＃34;或＆＃34; \ n＆＃34;。

var template = [
        "<h2>Student Details:</h2>",
        "<div align='justify'><p>"+name+"is studing in "+school_name+"</p>",
        "<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p></div>"
].join("<br/>");

对于更复杂的情况，我会说使用jquery或Plain JavaScript方法。如下所示。

function generate(){
    document.getElementById("show").style.display = "block";
    var name = document.getElementById("name").value;
    var school_name = document.getElementById("school_name").value;
    var school_site= document.getElementById("school_site").value;
    //jQuery:
    var node = $('<div></div>')
        .hide()
        .append($('<table></table>')
            .attr({ cellSpacing : 0 })
            .addClass("text")
        );
    //Plain JavaScript
    var h2 = document.createElement("h2");
    h2.textContent = "Student Details:";
    var div = document.createElement("div");
    var p1 = document.createElement("p");
    p1.textContent = name+"is studing in "+school_name;
    var p2 = document.createElement("p");
    p2.textContent = "Visit site: ";
    div.appendChild(p1);
    div.appendChild(p2);
    //add attribute node
    var node = document.getElementById("div1");
    var a = document.createAttribute("my_attrib");
    a.value = "newVal";
    node.setAttributeNode(a);
    //Once done return as string
    return div.outerHTML;
}

如何将多行html代码指定为javascript变量的值？

5 个答案: