###Seu código ficaria assim:
###Seu código ficaria assim:
Seu código ficaria assim:
function Somar() {
var somaN1 = window.document.querySelector('input#somaN1')
var somaN2 = window.document.querySelector('input#somaN2')
var somaRes = window.document.querySelector('span#somaRes')
var somaN1 = Number.parseInt(somaN1.value)
var somaN2 = Number.parseInt(somaN2.value)
var soma = somaN1 + somaN2
somaRes.innerHTML = `<strong>${soma}</strong>`
}
function Subtrair() {
var subtracaoN1 = window.document.querySelector('input#subtracaoN1')
var subtracaoN2 = window.document.querySelector('input#subtracaoN2')
var subtracaoRes = window.document.querySelector('span#subtracaoRes')
var subtracaoN1 = Number.parseInt(subtracaoN1.value)
var subtracaoN2 = Number.parseInt(subtracaoN2.value)
var subtracao = subtracaoN1 +- subtracaoN2
subtracaoRes.innerHTML = `<strong>${subtracao}</strong>`
}
function Multiplicar() {
var multiplicacaoN1 = window.document.querySelector('input#multiplicacaoN1')
var multiplicacaoN2 = window.document.querySelector('input#multiplicacaoN2')
var multiplicacaoRes = window.document.querySelector('span#multiplicacaoRes')
var multiplicacaoN1 = Number.parseInt(multiplicacaoN1.value)
var multiplicacaoN2 = Number.parseInt(multiplicacaoN2.value)
var multiplicacao = multiplicacaoN1 +* multiplicacaoN2
multiplicacaoRes.innerHTML = `<strong>${multiplicacao}</strong>`
}
function Dividir() {
var divisaoN1 = window.document.querySelector('input#divisaoN1')
var divisaoN2 = window.document.querySelector("input#divisaoN2")
var divisaoRes = window.document.querySelector('span#divisaoRes')
var divisaoN1 = Number.parseInt(divisaoN1.value)
var divisaoN2 = Number.parseInt(divisaoN2.value)
var divisao = divisaoN1 +/ divisaoN2
divisaoRes.innerHTML = `<strong>${divisao}</strong>`
}
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<title>Fazendo cálculos.</title>
<style>
body {
font: normal 18pt Arial;
}
input.number {
width: 200px;
}
span.aritmetico {
display: inline-grid;
width: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cálculos a seguir:</h1>
<div>
<input type="number" class="number" id="somaN1">
<span class="aritmetico">+</span>
<input type="number" class="number" id="somaN2">
<input type="button" value="=" onclick="Somar()">
<span id="somaRes"></span>
</div>
<div>
<input type="number" class="number" id="subtracaoN1">
<span class="aritmetico">-</span>
<input type="number" class="number" id="subtracaoN2">
<input type="button" value="=" onclick="Subtrair()">
<span id="subtracaoRes"></span>
</div>
<div>
<input type="number" class="number" id="multiplicacaoN1">
<span class="aritmetico">×</span>
<input type="number" class="number" id="multiplicacaoN2">
<input type="button" value="=" onclick="Multiplicar()">
<span id="multiplicacaoRes"></span>
</div>
<div>
<input type="number" class="number" id="divisaoN1">
<span class="aritmetico">÷</span>
<input type="number" class="number" id="divisaoN2">
<input type="button" value="=" onclick="Dividir()">
<span id="divisaoRes"></span>
</div>
</body>
</html>
Além disso, corrigi as funções executadas no seu código, todas as operações estavam apenas somando.
function Somar() {
var somaN1 = window.document.querySelector('input#somaN1')
var somaN2 = window.document.querySelector('input#somaN2')
var somaRes = window.document.querySelector('span#somaRes')
var somaN1 = Number.parseInt(somaN1.value)
var somaN2 = Number.parseInt(somaN2.value)
var soma = somaN1 + somaN2
somaRes.innerHTML = `<strong>${soma}</strong>`
}
function Subtrair() {
var subtracaoN1 = window.document.querySelector('input#subtracaoN1')
var subtracaoN2 = window.document.querySelector('input#subtracaoN2')
var subtracaoRes = window.document.querySelector('span#subtracaoRes')
var subtracaoN1 = Number.parseInt(subtracaoN1.value)
var subtracaoN2 = Number.parseInt(subtracaoN2.value)
var subtracao = subtracaoN1 + subtracaoN2
subtracaoRes.innerHTML = `<strong>${subtracao}</strong>`
}
function Multiplicar() {
var multiplicacaoN1 = window.document.querySelector('input#multiplicacaoN1')
var multiplicacaoN2 = window.document.querySelector('input#multiplicacaoN2')
var multiplicacaoRes = window.document.querySelector('span#multiplicacaoRes')
var multiplicacaoN1 = Number.parseInt(multiplicacaoN1.value)
var multiplicacaoN2 = Number.parseInt(multiplicacaoN2.value)
var multiplicacao = multiplicacaoN1 + multiplicacaoN2
multiplicacaoRes.innerHTML = `<strong>${multiplicacao}</strong>`
}
function Dividir() {
var divisaoN1 = window.document.querySelector('input#divisaoN1')
var divisaoN2 = window.document.querySelector("input#divisaoN2")
var divisaoRes = window.document.querySelector('span#divisaoRes')
var divisaoN1 = Number.parseInt(divisaoN1.value)
var divisaoN2 = Number.parseInt(divisaoN2.value)
var divisao = divisaoN1 + divisaoN2
divisaoRes.innerHTML = `<strong>${divisao}</strong>`
}
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<title>Fazendo cálculos.</title>
<style>
body {
font: normal 18pt Arial;
}
input.number {
width: 200px;
}
span.aritmetico {
display: inline-grid;
width: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cálculos a seguir:</h1>
<div>
<input type="number" class="number" id="somaN1">
<span class="aritmetico">+</span>
<input type="number" class="number" id="somaN2">
<input type="button" value="=" onclick="Somar()">
<span id="somaRes"></span>
</div>
<div>
<input type="number" class="number" id="subtracaoN1">
<span class="aritmetico">-</span>
<input type="number" class="number" id="subtracaoN2">
<input type="button" value="=" onclick="Subtrair()">
<span id="subtracaoRes"></span>
</div>
<div>
<input type="number" class="number" id="multiplicacaoN1">
<span class="aritmetico">×</span>
<input type="number" class="number" id="multiplicacaoN2">
<input type="button" value="=" onclick="Multiplicar()">
<span id="multiplicacaoRes"></span>
</div>
<div>
<input type="number" class="number" id="divisaoN1">
<span class="aritmetico">÷</span>
<input type="number" class="number" id="divisaoN2">
<input type="button" value="=" onclick="Dividir()">
<span id="divisaoRes"></span>
</div>
</body>
</html>
function Somar() {
var somaN1 = window.document.querySelector('input#somaN1')
var somaN2 = window.document.querySelector('input#somaN2')
var somaRes = window.document.querySelector('span#somaRes')
var somaN1 = Number.parseInt(somaN1.value)
var somaN2 = Number.parseInt(somaN2.value)
var soma = somaN1 + somaN2
somaRes.innerHTML = `<strong>${soma}</strong>`
}
function Subtrair() {
var subtracaoN1 = window.document.querySelector('input#subtracaoN1')
var subtracaoN2 = window.document.querySelector('input#subtracaoN2')
var subtracaoRes = window.document.querySelector('span#subtracaoRes')
var subtracaoN1 = Number.parseInt(subtracaoN1.value)
var subtracaoN2 = Number.parseInt(subtracaoN2.value)
var subtracao = subtracaoN1 - subtracaoN2
subtracaoRes.innerHTML = `<strong>${subtracao}</strong>`
}
function Multiplicar() {
var multiplicacaoN1 = window.document.querySelector('input#multiplicacaoN1')
var multiplicacaoN2 = window.document.querySelector('input#multiplicacaoN2')
var multiplicacaoRes = window.document.querySelector('span#multiplicacaoRes')
var multiplicacaoN1 = Number.parseInt(multiplicacaoN1.value)
var multiplicacaoN2 = Number.parseInt(multiplicacaoN2.value)
var multiplicacao = multiplicacaoN1 * multiplicacaoN2
multiplicacaoRes.innerHTML = `<strong>${multiplicacao}</strong>`
}
function Dividir() {
var divisaoN1 = window.document.querySelector('input#divisaoN1')
var divisaoN2 = window.document.querySelector("input#divisaoN2")
var divisaoRes = window.document.querySelector('span#divisaoRes')
var divisaoN1 = Number.parseInt(divisaoN1.value)
var divisaoN2 = Number.parseInt(divisaoN2.value)
var divisao = divisaoN1 / divisaoN2
divisaoRes.innerHTML = `<strong>${divisao}</strong>`
}
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<title>Fazendo cálculos.</title>
<style>
body {
font: normal 18pt Arial;
}
input.number {
width: 200px;
}
span.aritmetico {
display: inline-grid;
width: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cálculos a seguir:</h1>
<div>
<input type="number" class="number" id="somaN1">
<span class="aritmetico">+</span>
<input type="number" class="number" id="somaN2">
<input type="button" value="=" onclick="Somar()">
<span id="somaRes"></span>
</div>
<div>
<input type="number" class="number" id="subtracaoN1">
<span class="aritmetico">-</span>
<input type="number" class="number" id="subtracaoN2">
<input type="button" value="=" onclick="Subtrair()">
<span id="subtracaoRes"></span>
</div>
<div>
<input type="number" class="number" id="multiplicacaoN1">
<span class="aritmetico">×</span>
<input type="number" class="number" id="multiplicacaoN2">
<input type="button" value="=" onclick="Multiplicar()">
<span id="multiplicacaoRes"></span>
</div>
<div>
<input type="number" class="number" id="divisaoN1">
<span class="aritmetico">÷</span>
<input type="number" class="number" id="divisaoN2">
<input type="button" value="=" onclick="Dividir()">
<span id="divisaoRes"></span>
</div>
</body>
</html>
Além disso, corrigi as funções executadas no seu código, todas as operações estavam apenas somando.
Uma boa forma de garantir largura e alinhamento dos item é a utilização do inline-grid
, no seu caso, a utilização deve ser junto a definição da largura do elemento, ou seja width:20px
e a definição do alinhamento dos elementos da classe aritmetico
com a definição do text-align:center
.
###Seu código ficaria assim:
function Somar() {
var somaN1 = window.document.querySelector('input#somaN1')
var somaN2 = window.document.querySelector('input#somaN2')
var somaRes = window.document.querySelector('span#somaRes')
var somaN1 = Number.parseInt(somaN1.value)
var somaN2 = Number.parseInt(somaN2.value)
var soma = somaN1 + somaN2
somaRes.innerHTML = `<strong>${soma}</strong>`
}
function Subtrair() {
var subtracaoN1 = window.document.querySelector('input#subtracaoN1')
var subtracaoN2 = window.document.querySelector('input#subtracaoN2')
var subtracaoRes = window.document.querySelector('span#subtracaoRes')
var subtracaoN1 = Number.parseInt(subtracaoN1.value)
var subtracaoN2 = Number.parseInt(subtracaoN2.value)
var subtracao = subtracaoN1 + subtracaoN2
subtracaoRes.innerHTML = `<strong>${subtracao}</strong>`
}
function Multiplicar() {
var multiplicacaoN1 = window.document.querySelector('input#multiplicacaoN1')
var multiplicacaoN2 = window.document.querySelector('input#multiplicacaoN2')
var multiplicacaoRes = window.document.querySelector('span#multiplicacaoRes')
var multiplicacaoN1 = Number.parseInt(multiplicacaoN1.value)
var multiplicacaoN2 = Number.parseInt(multiplicacaoN2.value)
var multiplicacao = multiplicacaoN1 + multiplicacaoN2
multiplicacaoRes.innerHTML = `<strong>${multiplicacao}</strong>`
}
function Dividir() {
var divisaoN1 = window.document.querySelector('input#divisaoN1')
var divisaoN2 = window.document.querySelector("input#divisaoN2")
var divisaoRes = window.document.querySelector('span#divisaoRes')
var divisaoN1 = Number.parseInt(divisaoN1.value)
var divisaoN2 = Number.parseInt(divisaoN2.value)
var divisao = divisaoN1 + divisaoN2
divisaoRes.innerHTML = `<strong>${divisao}</strong>`
}
<!DOCTYPE html>
<html lang="pt-BR">
<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">
<title>Fazendo cálculos.</title>
<style>
body {
font: normal 18pt Arial;
}
input.number {
width: 200px;
}
span.aritmetico {
display: inline-grid;
width: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cálculos a seguir:</h1>
<div>
<input type="number" class="number" id="somaN1">
<span class="aritmetico">+</span>
<input type="number" class="number" id="somaN2">
<input type="button" value="=" onclick="Somar()">
<span id="somaRes"></span>
</div>
<div>
<input type="number" class="number" id="subtracaoN1">
<span class="aritmetico">-</span>
<input type="number" class="number" id="subtracaoN2">
<input type="button" value="=" onclick="Subtrair()">
<span id="subtracaoRes"></span>
</div>
<div>
<input type="number" class="number" id="multiplicacaoN1">
<span class="aritmetico">×</span>
<input type="number" class="number" id="multiplicacaoN2">
<input type="button" value="=" onclick="Multiplicar()">
<span id="multiplicacaoRes"></span>
</div>
<div>
<input type="number" class="number" id="divisaoN1">
<span class="aritmetico">÷</span>
<input type="number" class="number" id="divisaoN2">
<input type="button" value="=" onclick="Dividir()">
<span id="divisaoRes"></span>
</div>
</body>
</html>
default