Error in Visual Studio Code With JS, how to solve?

Question

I have a problem with compiling in Visual Studio with JavaScript. In line 11, where there is datos.innerHTML,

alert("Hola Mundo");


var nombre = "Juan";
var altura = 180;
var concatenacion = nombre + " " + altura;
/*document.write(nombre);
document.write(altura);*/
/*document.write(concatenacion);*/
var datos = document.getElementById("datos");
datos.innerHTML = '

    <h1>Soy la caja de datos</h1>
    <h2>Mi nombres es: $(nombre)</h2>
    <h3>Altura: $(altura)</h3>
';

there is a problem with the compilation. Does not accept labels h1, h2, h3. Should I install an extension?

Ari Firmanto · Accepted Answer · 2021-01-08 02:08:39Z

2

the other answer is correct, but you need to wrap with ${} for variable in order to used with ` (backticks)

  datos.innerHTML = `
        <h1>Soy la caja de datos</h1>
        <h2>Mi nombres es: (${nombre})</h2>
        <h3>Altura: (${altura})</h3>
    `;

answered Jan 8, 2021 at 2:08

Ari Firmanto

3541 silver badge16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SuperStormer · Accepted Answer · 2021-01-08 02:27:18Z

1

In Javascript, single/double quoted strings are always single line(without line continuations). To fix it, use a multiline string(aka template strings) by using backticks instead:

datos.innerHTML = `
    <h1>Soy la caja de datos</h1>
    <h2>Mi nombres es: $(nombre)</h2>
    <h3>Altura: $(altura)</h3>
`;

Edit: see Ari Firmanto's answer about using ${}.

edited Jan 8, 2021 at 2:27

answered Jan 8, 2021 at 2:03

SuperStormer

5,5185 gold badges29 silver badges40 bronze badges

Comments

user5774952 · Accepted Answer · 2021-01-08 02:04:08Z

0

The single quotes in that statement need to be backticks/grave marks ` rather than ':

datos.innerHTML = `

    <h1>Soy la caja de datos</h1>
    <h2>Mi nombres es: $(nombre)</h2>
    <h3>Altura: $(altura)</h3>
`;

Regular single and double quotes are for regular strings in JavaScript; template strings and multiline strings use the backtick character.

answered Jan 8, 2021 at 2:04

user5774952

Comments

kiranvj · Accepted Answer · 2021-01-08 02:12:49Z

0

The error is because you have line breaks in the string.

Option 1

Keep the html string within quotes but concat the varialbles using + operator

datos.innerHTML = '<h1>Soy la caja de datos</h1><h2>Mi nombres es: ' 
                   + nombre + 
                   '</h2><h3>Altura: ' 
                   + altura + '</h3>';

Option 2

Use template literals and give variables like ${variable-name}. Check the support for Internet explorer if you are using this method.

datos.innerHTML = `
    <h1>Soy la caja de datos</h1>
    <h2>Mi nombres es: ${nombre}</h2>
    <h3>Altura: ${altura}</h3>
`;

answered Jan 8, 2021 at 2:12

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Collectives™ on Stack Overflow

Error in Visual Studio Code With JS, how to solve?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related