What would be the most efficient way to replicate this code? (Javascript)

Question

What would be the most efficient way to replicate this code? (Javascript)

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Doubt

With this code, I can only create and manipulate an "official", I wanted to be able to add more employees by clicking a button and manipulating their data.

HTML

<!DOCTYPE html>
<html>
    <body>
      Funcionario: <div id="func"></div>
      <button id="alternome">Alterar nome</button>
      Salario: R$<div id="salario"></div>
      <button id="aumenta">+</button><button id="abaixa">-</button>
    </body>
</html>

JavaScript

function funcionario(){
//altera div func
var f = document.getElementById("func");
var s2 = f.innerHTML;
f.innerHTML = prompt("Qual o nome do funcionario??");
//pos-alteramento de nome
var a= document.getElementById("alternome");
a.onclick = function alternome(){
    f.innerHTML = prompt("Qual o nome atual?");
}
//altera div salario
var n=document.getElementById("salario");
var s1 = n.innerHTML;
n.innerHTML = prompt("Qual o salario?");

//aumenta valor
var m=document.getElementById("aumenta");
m.onclick = function aumenta(){
    //gambiarra para aumentar o valor 100X
    for(var i=0;i<100;i++){
    n.innerHTML++;
    }
};
//decrementa valor
var o=document.getElementById("abaixa");
o.onclick = function abaixa(){
    //gambiarra para abaixar o valor 100X 
    for(var i=0;i<100;i++){
        if(n.innerHTML==0){
            continue;
        }
    n.innerHTML--;
    }
};
}
//tem q colocar essa função pra funcionar os bagui
setTimeout(funcionario, 500);

javascript html objetos construtor

asked by anonymous 25.05.2016 / 00:37

2 answers

Error Undefined reference to Symbol generate a json php

score 0 · Answer 1

I have a code that can help you. This helps in many cases.

Put the 'script' after the 'body'.

		// AQUI EU SETO O MÉTODO TEMPLATE
		String.prototype.template = function (obj) {
		    return this.replace(/\{\{([\w]+)\}\}/g, function (str, prop) {
		        return obj[prop];
		    });
		};

		// ESTE É O MODELO QUE VOCÊ IRÁ USAR
		var modelo = '' +
	      'Funcionario: <div id="func">{{nome}}</div>' +
	      '<button id="alternome">Alterar nome</button>' +
	      '<input type="hidden" name="idfunc" id="idfunc" value="{{id}}" />' +
	      'Salario: <div id="salario">R${{salario}}</div>' +
	      '<button id="aumenta">+</button><button id="abaixa">-</button>';

		// ESSE É O JSON, QUE PODER SER RECEBIDO DE UMA REQUISIÇÃO. FICA A DICA
	    var users = [
	        {
	            id      : 1,
	            nome    : "JOAO",
	            salario : 2000
	        },{
	            id      : 2,
	            nome    : "MARIA",
	            salario : 3000
	        }
	    ];

	    // AQUI EU ESCREVO NA DIV
      	users.forEach(function(o, i){      		
      		document.getElementById("funcionarios").innerHTML += modelo.template(users[i]);  			
      	});

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		
	</head>
	<body>
		<div id="funcionarios"></div>
	</body>
	

</html>

score 0 · Answer 2

Transforms these IDs into classes since IDs must be unique on the page. This way you can create a logic regarding the parent element of each employee and instead of

var f = document.getElementById("func");

You can use a class search from the element you want to edit:

var f = el.querySelector('.nome');

I developed your code more for what you asked for and it looks like this:

function editarFuncionario(el) {
    //altera div func
    var f = el.querySelector('.nome');
    var s2 = f.innerHTML;
    f.innerHTML = prompt("Qual o nome do funcionario??");
    //pos-alteramento de nome
    var a = el.querySelector(".alternome");
    a.onclick = function alternome() {
        f.innerHTML = prompt("Qual o nome atual?");
    };
    //altera div salario
    var n = el.querySelector(".salario");
    var s1 = n.innerHTML;
    n.innerHTML = prompt("Qual o salario?");

    //aumenta valor
    var m = el.querySelector(".aumenta");
    m.onclick = function aumenta() {
        n.innerHTML = (Number(n.innerHTML) || 0) + 100;
    };
    //decrementa valor
    var o = el.querySelector(".abaixa");
    o.onclick = function abaixa() {
        n.innerHTML = (Number(n.innerHTML) || 0) - 100;
    };
}

function removerFuncionario(el) {
    el.parentElement.removeChild(el);
}

function adicionarFuncionario(el) {
    var novo = el.cloneNode(true);
    el.parentElement.appendChild(novo);
    auscultador(novo);
}

function closest(el, selector) {
    while (el && !el.matches(selector)) {
        el = el.parentElement;
    }
    return el;
}

function auscultador(el) {
    var buttons = el.querySelectorAll('.ui-buttons');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function(e) {
            var el = closest(e.target, '.funcionario');
            var action = e.target.dataset.action;
            if (action == 'editar') return editarFuncionario(el);
            if (action == 'remover') return removerFuncionario(el);
            if (action == 'adicionar') return adicionarFuncionario(el);
        });
    }
}

auscultador(document.body);

.funcionario {
    padding: 20px;
}

<div class="funcionario">
    <div> Funcionario:
        <div class="nome"></div>
        <button class="alternome">Alterar nome</button>
    </div>
    <div> Salario: R$
        <div class="salario"></div>
        <button class="aumenta">+</button>
        <button class="abaixa">-</button>
    </div>
    <div class="ui-buttons">
        <button data-action="adicionar">Adicionar novo functionario</button>
        <button data-action="editar">Editar functionario</button>
        <button data-action="remover">Remover functionario</button>
    </div>
</div>

What would be the most efficient way to replicate this code? (Javascript)

Doubt

HTML

JavaScript

2 answers

Example online: link