Problem in Table Insertion

Asked

Viewed 28 times

0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Numero par</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
    <div class="form-group col-md-2">
        <label>Número</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend">Nota</span>
            </div>
            <input type="text" class="form-control " id="entrada" placeholder="Numero">
        </div>
    </div>
    <div class="form-group col-md-2">
        <input type="button" value="Calcular" class="btn btn-outline-primary" onclick="botao()">
    </div>
    <table id="tabela" class="table table-hovers">
        <thead>
            <tr>
                <th scope="col">Número</th>
                <th scope="col">Pares</th>
                <th scope="col">Soma</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"></th>
                <td id="EntradaPar"></td>
                <td id="EntradaSoma"></td>
            </tr>
        </tbody>
    </table>
    <script src="JavaScript.js"></script>
</body>

</html>

"use strict"
let contador = 1
let par = 2
let soma = 0
function botao() {
    tabela.innerHTML += 
    `
    <td>${entrada.value}</td>
     `
    while (contador <= Number(entrada.value)) {
        soma = soma + par
        EntradaPar.innerHTML += `${par}`
        par = par + 2
        contador++
    }
    EntradaSoma.innerHTML = `${soma}`
}

inserir a descrição da imagem aqui

This is the result that I am having, I would like to type a number and that it is in "Number" the pairs of it is in "Pairs" and the sum is in "Sum", and when you type another number, jump to the bottom line and do the same thing. The problem is that when I type a number larger than the previous one it just adds the pairs and when I type a smaller one, it does not return a result.

javascript html5 bootstrap-4

  • Explains what the even columns are and sums with a valid example.

  • For example, if I type the number 4, it will take the first 4 even numbers. Ex: 2, 4, 6, and 8 and will return the sum of these numbers "20"... Managed to understand?

1 answer

0


I changed some things and the result checks with the comment

"use strict"
		function botao() {
			let contador = 1
			let par = 2
			let pares = '';
			let soma = 0
			while (contador <= Number(entrada.value)) {
				soma = soma + par
				pares += `${par} `
				par = par + 2
				contador++
			}
			tbody.innerHTML += 
			`
			<tr><td>${entrada.value}</td><td>${pares}</td><td>${soma}</td></tr>
			`
		}
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Numero par</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
	<div class="form-group col-md-2">
		<label>Número</label>
		<div class="input-group">
			<div class="input-group-prepend">
				<span class="input-group-text" id="inputGroupPrepend">Nota</span>
			</div>
			<input type="text" class="form-control " id="entrada" placeholder="Numero">
		</div>
	</div>
	<div class="form-group col-md-2">
		<input type="button" value="Calcular" class="btn btn-outline-primary" onclick="botao()">
	</div>
	<table id="tabela" class="table table-hovers">
		<thead>
			<tr>
				<th scope="col">Número</th>
				<th scope="col">Pares</th>
				<th scope="col">Soma</th>
			</tr>
		</thead>
		<tbody id="tbody">
			
		</tbody>
	</table>
</body>

</html>

Browser other questions tagged javascript html5 bootstrap-4

You are not signed in. Login or sign up in order to post.