Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Transferir o resultado do IMC para uma tabela

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

(tabela com a parte de cima escrito nome e IMC, no lado esquerdo Flávio e Júlio, e no lado direito está vazio para colocar os resultados dos cálculos do IMC )

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;
}
1 resposta
solução!

Fala Murilo,

Para colocar o valor de uma variável na segunda coluna de uma tabela usando JavaScript Vanilla, você pode usar o método insertCell() para adicionar uma nova célula à tabela e, em seguida, usar o método innerHTML para definir o conteúdo da célula como o valor da variável.

Exemplo:

// Criar a variável
let variavel = 'valor';

// Obter a referência da tabela
let tabela = document.getElementById('minhaTabela');

// Obter a referência da linha que deseja adicionar a célula
let linha = tabela.rows[0];

// Adicionar a célula na segunda coluna da linha
let celula = linha.insertCell(1);

// Definir o conteúdo da célula como o valor da variável
celula.innerHTML = variavel;

Aqui tem mais infos sobre a .rows se você precisar de mais exemplos: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

Abcs!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software