Como mencionado nos comentários você deve substituir o 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
e 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 comportamentosinline
(ex.:ocupar apenas o espaço do conteúdo, não quebrar linha) eblock
(ex.: dimensões configuráveis) em um único elemento HTML. Elementos comdisplay:inline-block
são como elementosdisplay: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
ewidth
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>