How to assign Multiple line html code as a value to a javascript variable?

Question

This my code..

 <!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" is the javascript variable.

I need to assign HTML code as value for "content" variable,
And i also need to add some Javascript variable inside the HTML code,
How to add javascript variable in html Hypertext link?

no need to add new line character '/n'

Ajay Narain Mathur
– Ajay Narain Mathur

2016-12-08 05:25:14 +00:00
Commented Dec 8, 2016 at 5:25 — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Dec 8, 2016 at 5:25

xdeepakv · Accepted Answer · 2016-12-08 10:47:38Z

There are many ways to achieve this. For a simple use-case, you can use an array of string to perform work and at the end you can join with "
" or "\n".

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/>");

For more complex case, I will say use jquery or Plain JavaScript method. As given below.

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;
}

Mairaj Ahmad · Accepted Answer · 2016-12-08 05:27:17Z

1

You have extra space in id in school_name and school_site`.

So it is not being recognized and you are getting exception. Also your syntax to concatenate string is also incorrect.

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

Your full javascript code would be like this

<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>

edited Dec 8, 2016 at 5:27

answered Dec 8, 2016 at 5:25

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

1 Comment

Manoj Kumar K Over a year ago

Thanks. I missed '+' to add in line of the HTML code. Its working now..

user2345 · Accepted Answer · 2016-12-08 05:30:00Z

1

You can write a string on multiple lines using template literals, i.e. using the character " ` ".

You can easily integrate variables using ${yourVar} in the template literal

Example:

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

Note: this is an ES6 feature, aka the not so new JavaScript that is not yet fully supported by browsers. To make this code compatible with older browsers, use a transpiler like babel

answered Dec 8, 2016 at 5:30

user2345

3,2271 gold badge24 silver badges44 bronze badges

Comments

Upesh M · Accepted Answer · 2016-12-08 05:27:56Z

0

You have to use <br> instead of '/n' while assigning to javascript variable.

answered Dec 8, 2016 at 5:27

Upesh M

4021 gold badge5 silver badges9 bronze badges

Comments

Ajay Narain Mathur · Accepted Answer · 2016-12-08 05:28:31Z

The problem as I see it is you have hit enter in the mid of string and you have extra space in the id selector.

Don't hit enter or use tilt ` to declare string instead of quotes.

<!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>

Suggestion : No need to use /n for new line, h2 is block element no need of break too.

Collectives™ on Stack Overflow

How to assign Multiple line html code as a value to a javascript variable?

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related