2

Olá,

estou enfrentando uma dificuldade com meu código javascript, pois não consigo imaginar uma forma em que seja possível acessar as funções do construtor do meu objeto JavaScrip no formulário HTML.

Gostaria de saber se existe uma forma de fazer isso que estou querendo.

Abaixo segue em anexo o código HTML e JavaScript, respectivamente.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Calculadora</title>
	<meta charset="UTF-8">
	<script src="biblioteca.js" type="text/javascript" ></script>
</head>
<body >
	<form id="formulario">
		<p>Digite o primeiro número</p>
		<input type="text" name="valor1" value="0">
		<p>Digite o segundo número</p>
		<input type="text" name="valor2" value="0">

		<p>Resultado</p>
		<input type="text" name="resultado" disabled="disabled">

		<br/>
		<br/>

		<table>
			<caption>Operações</caption>
			
			<tr>
				<th><a href="#" onclick="Calculadora().getSoma()">SOMAR</a></th>
				<th><a href="#" onclick="Calculadora().getSubtracao()">SUBTRAIR</a></th>
			</tr>
			<tr>
				<th><a href="#" onclick="Calculadora().getMultiplicacao()">MULTIPLICAR</a></th>
				<th><a href="#" onclick="Calculadora().getDivisao()">DIVIDIR</a></th>
			</tr>
		</table>
	</form>
</body>
</html>

JavaScript:

function Calculadora(){

	this.setValor1 = function(numero1){
		this.valor1 = +document.getElementById('formulario').valor1.value;
	}

	this.setValor2 = function(numero2){
		this.valor2 = +document.getElementById('formulario').valor2.value;
	}

	this.getSoma = function soma(){
		resultado = this.valor1 + this.valor2;

		document.getElementById('formulario').resultado.innerHTML = resultado;
	}

	this.getSubtracao = function subtracao(){
		resultado = this.valor1 - this.valor2;

		document.getElementById('formulario').resultado.innerHTML = resultado;
	}

	this.getMultiplicacao = function multiplicacao(){
		resultado = this.valor1 * this.valor2;

		document.getElementById('formulario').resultado.innerHTML = resultado;
	}

	this.getDivisao = function divisao(){
		resultado = this.valor1 / this.valor2;

		document.getElementById('formulario').resultado.innerHTML = resultado;
	}

	
}

Desde já, obrigado.

1
  • 1
    Porque não faz o onclick no javascript? Commented 21/05/2016 às 14:40

1 Resposta 1

1

Isso seria possivel se fizesses algo como

var Calculadora = new _Calculadora();

onde _Calculadora é a função construtora, e Calculadora é uma variável global instância criada quando a página carrega.

Podem creio quer seria mais limpo fazer no JavaScript em vêz de ter chamadas inline no HTML. Poderia ser algo assim:

function Calculadora() {

    this.init = function(id) {
        this.formulario = document.getElementById(id);
        this.valor1 = this.formulario.valor1;
        this.valor2 = this.formulario.valor2;
        this.resultado = this.formulario.resultado;
        var acoes = this.formulario.querySelectorAll('table th a');
        for (var i = 0; i < acoes.length; i++) {
            acoes[i].addEventListener('click', this.doAction.bind(this));
        }
    }

    this.doAction = function(e) {
        var el = e.target;
        var action = el.dataset.onclick;
        this[action]();
    }

    this.getValues = function() {
        return [this.valor1.value, this.valor2.value].map(Number);
    }

    this.getSoma = function soma() {
        var val = this.getValues();
        this.escreve(val[0] + val[1])
    }

    this.getSubtracao = function subtracao() {
        var val = this.getValues();
        this.escreve(val[0] - val[1])
    }

    this.getMultiplicacao = function multiplicacao() {
        var val = this.getValues();
        this.escreve(val[0] * val[1])
    }

    this.getDivisao = function divisao() {
        var val = this.getValues();
        this.escreve(val[0] / val[1])
    }
    this.escreve = function(txt) {
        this.resultado.value = txt;
    }
}

new Calculadora().init('formulario');
<form id="formulario">
    <p>Digite o primeiro número</p>
    <input type="text" name="valor1" value="0">
    <p>Digite o segundo número</p>
    <input type="text" name="valor2" value="0">

    <p>Resultado</p>
    <input type="text" name="resultado" disabled="disabled">

    <br/>
    <br/>

    <table>
        <caption>Operações</caption>

        <tr>
            <th><a href="#" data-onclick="getSoma">SOMAR</a></th>
            <th><a href="#" data-onclick="getSubtracao">SUBTRAIR</a></th>
        </tr>
        <tr>
            <th><a href="#" data-onclick="getMultiplicacao">MULTIPLICAR</a></th>
            <th><a href="#" data-onclick="getDivisao">DIVIDIR</a></th>
        </tr>
    </table>
</form>

jsFiddle: https://jsfiddle.net/b884xjce/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .