Access javascript object in html form

Asked

Viewed 309 times

2

Hello,

I am facing a difficulty with my javascript code, because I can’t imagine a way in which it is possible to access the constructor functions of my Javascrip object in the HTML form.

I wonder if there’s a way to do it that I’m wanting.

Below follows in attachment the code HTML and Javascript, respectively.

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;
	}

	
}

From now on, thank you.

javascript html
  • 1

    Why doesn’t onclick javascript?

1 answer

1


That would be possible if you did something like 

var Calculadora = new _Calculadora();

where _Calculadora is the construction function, and Calculadora is a global instance variable created when the page loads.

They may think it would be cleaner to do in Javascript instead of having inline calls in HTML. It could be something like this:

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/

Browser other questions tagged javascript html

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