Bom dia a todos É mais uma curiosidade do que realmente uma dúvida Eu estava pensando como eu posso fazer para ao invés de mostrar os resultados do IMC estrito numa frase "O IMC do Flávio é: 33" como foi ensinado na aula, eu queria transferir o resultado do IMC (neste caso, 33) feito no JavaScript para uma tabela que eu fiz no HTML (que está mostrado na imagem a baixo). No meu caso o IMC do Flávio deu 33 e Júlio 29
( )
Códigos do HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/style.css">
<title>Teste de IMC</title>
</head>
<body>
<h1>Teste de IMC</h1>
<br>
<table>
<thead>
<tr>
<th>Nome</th>
<th>IMC</th>
</thead>
<tbody>
<tr>
<td>Flávio</td>
<td><script>document.write(imcFlavio);</script></td>
<tr>
<td>Júlio</td>
<td></td>
</tbody>
</table>
<script src="JavaScript/calculos.js"></script>
</body>
</html>
Códigos do JavaScript (calculos.js)
//funções
function margem(){
document.write('<br><br>')
}
function mostraTela(texto){
document.write(texto);
margem();
};
function calculaImc(peso,altura){
return Math.round(peso/(Math.pow(altura,2)));
}
//parâmetros
let pesoFlavio = 89
let alturaFlavio = 1.65
let imcFlavio = calculaImc(pesoFlavio,alturaFlavio)
let pesoJulio = 93
let alturaJulio = 1.78
let imcJulio = calculaImc(pesoJulio,alturaJulio)
//textos no HTML
mostraTela('O IMC do Flávio é: '+ imcFlavio)
mostraTela('O IMC do Julio é: '+ imcJulio)
Arquivo CSS (style.css)
body {width: 1280px;
margin: 0 auto;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(#DCDCDC 30%,#808080 70%);
}
body > h1 {font-size: 2rem;
text-align: center;
font-weight: bolder;
margin-bottom: 2rem;
}
table
{margin: 30px 0;
}
thead
{font-weight: bold;
background: #c4c2c2;}
tbody
{background: white;
}
th,td
{border: 2px solid #000000;
padding: 5px 30px;
text-align: center;
}
Código CSS (reset.css)
* {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
}
img {
width: inherit;
}
button {
font-family: inherit;
font-size: inherit;
color: inherit;
font-weight: inherit;
padding: 0;
border: none;
background-color: unset;
}
input {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
textarea {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
select {
border: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}