Skip to main content
removeu 54 caracteres do conteúdo; título editado
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Elementos do javascriptJavaScript quebrando linha

Criei um htmlHTML simples só pra testar o comportamento do javascriptJavaScript no documento htmlHTML, porém o elemento javascriptJavaScript pula uma nova linha quando na verdade eu quero que ele fique na mesma linha do texto. ps: Estou bem no início do aprendizado de javascript

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>

Elementos do javascript quebrando linha

Criei um html simples só pra testar o comportamento do javascript no documento html, porém o elemento javascript pula uma nova linha quando na verdade eu quero que ele fique na mesma linha do texto. ps: Estou bem no início do aprendizado de javascript

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>

Elementos do JavaScript quebrando linha

Criei um HTML simples só pra testar o comportamento do JavaScript no documento HTML, porém o elemento JavaScript pula uma nova linha quando na verdade eu quero que ele fique na mesma linha do 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="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>

Adição dum sandbox.
Fonte Link
Augusto Vasques
  • 18,8mil
  • 10
  • 31
  • 62
<!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>

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

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>
 

Fonte Link

Elementos do javascript quebrando linha

Criei um html simples só pra testar o comportamento do javascript no documento html, porém o elemento javascript pula uma nova linha quando na verdade eu quero que ele fique na mesma linha do texto. ps: Estou bem no início do aprendizado de javascript

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