Javascript elements breaking line

Asked

Viewed 236 times

0

I created a simple HTML just to test the behavior of Javascript in the HTML document, but the Javascript element skips a new line when I actually want it to be in the same line of text.

var casa = {
  quartos: 3,
  cores: ['branca', 'cinza'],
  janelas: true,
};
//Adiciona uma propriedade ao objeto
casa.cores[2] = 'verde';

//Modifica a mensagem true por uma outra
if (casa.janelas = true) {
  casa.janelas = 'tem janelas';
}

//Pega a quantidade de quartos da casa
var numQuartos = document.getElementById('quartosNumero');
numQuartos.textContent = casa.quartos;

//Pega as cores existentes na casa
var numCores = document.getElementById('coresCasa');
numCores.textContent = casa.cores;

//Exibe se tem janelas
var bolJanela = document.getElementById('temJanela');
bolJanela.textContent = casa.janelas;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>Começando com javascript</title>
</head>

<body>
  <h1>Esta é a casa</h1>
  <p>Quantidade de quartos:
    <div id="quartosNumero"></div>
  </p>
  <p>Cores presentes:
    <div id="coresCasa"></div>
  </p>
  <p>Extra:
    <div id="temJanela"></div>
  </p>
  <script src="ex1.js"></script>
</body>

</html>

javascript html
  • 2

    use span instead of div

  • 2

    Your problem has nothing to do with Javascript, but with HTML. In addition you can’t put a div within a paragraph <p>.

1 answer

5

As mentioned in the comments your problem is about HTML and is not related to Javascript, the solution is by replacing the element <div>, within paragraphs <p>, by a single element <span> which is a generic container online for phrasing content.

But why of it?

In the documentation on the HTML5 Content Template 5 specifies the element <p> as being a phrasing element:

3.2.5.2.5 Content of phrasing

The phrasing content is the text of the document as well as the elements marking that text at the level intra-paragraph. A phrasing sequence that forms a block of text is a paragraph.

Most of the elements that are categorized as sentence content may only contain elements that are categorized as content of phrases, and not any flow content.

Already the element <div> is classified as a flow element which prevents it from being used within the element <p> as shown above elements that are categorized as sentence content may not contain any stream content, only text content.

var casa = {
  quartos: 3,
  cores: ['branca', 'cinza'],
  janelas: true,
};
//Adiciona uma propriedade ao objeto
casa.cores[2] = 'verde';

//Modifica a mensagem true por uma outra
if (casa.janelas = true) {
  casa.janelas = 'tem janelas';
}

//Pega a quantidade de quartos da casa
var numQuartos = document.getElementById('quartosNumero');
numQuartos.textContent = casa.quartos;

//Pega as cores existentes na casa
var numCores = document.getElementById('coresCasa');
numCores.textContent = casa.cores;

//Exibe se tem janelas
var bolJanela = document.getElementById('temJanela');
bolJanela.textContent = casa.janelas;
<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>Começando com javascript</title>
</head>

<body>
  <h1>Esta é a casa</h1>
  <p >Quantidade de quartos:
    <span id="quartosNumero"></span>
  </p>
  <p>Cores presentes:
    <span id="coresCasa"></span>
  </p>
  <p>Extra:
    <span id="temJanela"></span>
  </p>
  <!--script src="ex1.js"></script-->
</body>

</html>

Another approach, respecting the above-mentioned norms, would be to separate the flow elements from the phrased elements and apply a style to the elements <p> and <div> modifying the property display which will specify the type of rendering box for these elements.

In this case the display: inline-block that according to this reply by Renato Dinhani and that splattne response:

inline-block is the junction of behaviors inline (ex.: occupy only the space of the content, not break line) and block (ex. configurable dimensions) in a single HTML element. Elements with display:inline-blockare as elements display:inline, but they may have a width and a height. This means you can use an embedded block element as a block as it flows within text or other elements.

  • In case both the properties margin, padding, height and width will not be entered in the stylesheet and will use the default value of each browser as they are not the focus.

var casa = {
  quartos: 3,
  cores: ['branca', 'cinza'],
  janelas: true,
};
//Adiciona uma propriedade ao objeto
casa.cores[2] = 'verde';

//Modifica a mensagem true por uma outra
if (casa.janelas = true) {
  casa.janelas = 'tem janelas';
}

//Pega a quantidade de quartos da casa
var numQuartos = document.getElementById('quartosNumero');
numQuartos.textContent = casa.quartos;

//Pega as cores existentes na casa
var numCores = document.getElementById('coresCasa');
numCores.textContent = casa.cores;

//Exibe se tem janelas
var bolJanela = document.getElementById('temJanela');
bolJanela.textContent = casa.janelas;
p,
div {
  display: inline-block;
}
<!DOCTYPE html>
<html lang="pt">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="index.css">
  <title>Começando com javascript</title>
</head>

<body>
  <h1>Esta é a casa</h1>
  <p>Quantidade de quartos:</p> <!-- Aqui há uma clara distinção entre elementos de fluxo e fraseados -->
  <div id="quartosNumero"></div>
  <br>   <!-- Uma quebra de linha é introduzida para fazer a separação-->
  <p>Cores presentes:</p>
  <div id="coresCasa"></div>
  <br>
  <p>Extra:</p>
  <div id="temJanela"></div>
  <br>
  <!--script src="ex1.js"></script-->
</body>

</html>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.