Skip to main content
5 de 5
adicionou 2 caracteres ao conteúdo
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62

Como mencionado nos comentários seu problema é sobre HTML e não está relacionado a JavaScript, a solução se dá pela substituição do elemento <div>, dentro dos parágrafos <p>, por um elemento <span> que é um container genérico em linha para conteúdo fraseado.

Mas o por que disso?

Na documentação sobre o Modelo de Conteúdo HTML5 especifica o elemento <p> como sendo um elemento fraseado:

3.2.5.2.5 Conteúdo do fraseado

O conteúdo fraseado é o texto do documento, bem como os elementos que marcam esse texto a nível intra-parágrafo. Uma sequencia de conteúdo fraseado que forma um bloco de texto é um parágrafo.

A maioria dos elementos que são categorizados como conteúdo de frases só podem conter apenas elementos que são categorizados como conteúdo de frases, e não qualquer conteúdo de fluxo.

Já o elemento <div> está classificado como um elemento de fluxo o que o impede de ser utilizado dentro do elemento <p> pois como mostrado acima elementos que são categorizados como conteúdo de frases não podem conter um conteúdo de fluxo qualquer, apenas conteúdo de texto.

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>

Outra abordagem, respeitando as normas citadas acima, seria separar os elementos de fluxo dos elementos fraseados e aplica um estilo aos elementos <p> e <div> modificando a propriedade display que irá especificar o tipo de caixa de renderização desses elementos.

No caso será utilizado a o display: inline-block que segundo essa resposta de Renato Dinhani e essa resposta de splattne:

inline-block é a junção dos comportamentos inline (ex.:ocupar apenas o espaço do conteúdo, não quebrar linha) e block (ex.: dimensões configuráveis) em um único elemento HTML. Elementos com display:inline-blocksão como elementos display:inline, mas eles podem ter uma largura e uma altura . Isso significa que você pode usar um elemento de bloco embutido como um bloco enquanto o flui dentro de texto ou outros elementos.

  • No caso tanto as propriedades margin, padding, height e width não serão introduzidas na folha de estilo e usarão o valor default de cada navegador pois não são o foco.

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>

Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62