Access javascript object in html form

Question

Access javascript object in html form

Navigation

#1 by (1 votes)

2

Hello,

I'm facing a difficulty with my javascript code, as I can not imagine a way in which I can access the constructor functions of my JavaScrip object in the HTML form.

I would like to know if there is a way to do this that I want.

Below is the HTML and JavaScript code, 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;
	}

	
}

Thanks in advance.

javascript html

asked by anonymous 21.05.2016 / 16:20

1 answer

insert data passing only $ _POST using Laravel Create array from dynamic form in PHP

score 1 · Accepted Answer

This would be possible if you did something like

var Calculadora = new _Calculadora();

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

They may believe it would be cleaner to do in JavaScript rather than 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>

Access javascript object in html form

1 answer

jsFiddle: link