Jump to content

Criar campos dinamicamente com js


Edison Lemes dos Santos

Recommended Posts

Oi gostaria de saber se TEM Como Apos o leque ter percorridodo Primeiro PARA O ultimo, apagar fazer ultimo parágrafo O Primeiro, Sendo that o input Será, apagado da posição anterior?

 

<! doctype html>

<html>

<head>

<meta charset = "utf-8">

<title> Untitled Document </ title>

</ Head>

<body>

 

<script>

 

 

var telefone = new Array ();

telefone [0] = "Telefone 1:";

telefone [1] = "Telefone 2:";

telefone [2] = "Telefone 3:";

 

var cont = 0;

 

 

var myFunction = function () {

if (cont <telefone.length) {

var n = document.getElementById ("minhaArea");

var oF = document.createElement ("div");

var oFI = document.createElement ("div");

oF.setAttribute ("id", "f" + cont);

oFi.setAttribute ("id", "g" + cont);

n.appendChild (oF);

n.appendChild (oFI);

document.getElementById ("f" + cont) .innerHTML = "<input type =" Numero "id =" minha "+ cont +" "> <input type =" Botão "onClick = 'apaga (" cont + "+) "valor = '-'>";

document.getElementById ("g" + cont) .innerHTML = telefone [cont];

cont ++;

}

};

 

apaga Function (id) {

var n = document.getElementById ("minhaArea");

var oF = document.getElementById ("f" + id);

var oFI = document.getElementById ("g" + id);

var apagado = n.removeChild (oF);

apagados var = n.removeChild (oFI);

cont--;

 

};

</ Script>

 

<input type = "Button" = "Telefones:" onclick = "myFunction ()">

<div id = "minhaArea"> </ div>

 

 

</ Body>

</ Html>

Edited by Edison Lemes dos Santos
Link to comment
Share on other sites

Check the list of array methods:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

 

Look at push, pop, shift, and unshift.

 

Also, HTML and Javascript use English keywords. The browser doesn't know what an input type "botão" is, or what "valor" is, and Javascript doesn't know what "função" means.

Link to comment
Share on other sites

Maybe you are looking for something like this?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Untitled Document </title>
<script>
window.onerror = function(a,b,c){
alert('Javascript Error: '+a+'\nURL: '+b+'\nLine Number: '+c);
return true;
}
</script>
</head>

<body>

<input type="button" value="Telefones:" onclick="myFunction()"/>
<div id="minhaArea"></div>
<hr/>
<div id="nums"></div>

<script>

var maximum = 4;

var nums = [];

var cont = 0;
 
var myFunction = function() {
if (cont < maximum) {
var n = document.getElementById("minhaArea");
var oF = document.createElement("div");
var oFI = document.createElement("div");
oF.setAttribute("id", "f" + cont);
oFI.setAttribute("id", "g" + cont);
n.appendChild(oF);
n.appendChild(oFI);
document.getElementById("f" + cont).innerHTML = 'Telefone ' + (cont+1) + ': ';
document.getElementById("g" + cont).innerHTML = '<input type="text" id="minhaArea'+ cont +'"/> <input type="button" onClick="apaga(' + cont + ')" value="-"/> ';
cont++;
}
};
  
var apaga = function(id) {
disp(id);
var n = document.getElementById("minhaArea");
var oF = document.getElementById("f" + id);
var OFI = document.getElementById("g" + id);
var apagado = n.removeChild(oF);
var apagados = n.removeChild(OFI);
cont--;
};

var disp = function(id) {
nums[id] = document.getElementById('minhaArea'+id).value;
var n = document.getElementById('nums');
var str = '';
for (var i=0; i<=nums.length ; i++){
if (nums[i] != undefined && nums[i].trim() != ''){
str += '<br/>Telefone '+ (i+1) +' = ' + nums[i]; 
}}
n.innerHTML = str;
};

</script>

</body>
</html>
Link to comment
Share on other sites

I think you are looking to remove inputed number, then reset count and id references, basically you need to retrieve current telephone numbers and recreate div, input element WITH those values


<!doctype html>

<html>

<head>

<meta charset = "utf-8">

<title> Untitled Document </title>

</head>

 

 

<body>

 

<input type="button" value="Telefones:" onclick="myFunction()"/>

<div id="minhaArea"></div>

<hr/>

<div id="nums"></div>

 

<script>

var maximum = 4;

 

var nums = [];

 

var cont = 0;

 

var myFunction = function() {

if (cont < maximum) {

var n = document.getElementById("minhaArea");

var oF = document.createElement("div");

var oFI = document.createElement("div");

oF.setAttribute("id", "f" + cont);

oFI.setAttribute("id", "g" + cont);

n.appendChild(oF);

n.appendChild(oFI);

document.getElementById("f" + cont).innerHTML = 'Telefone ' + (cont + 1) + ': ';

document.getElementById("g" + cont).innerHTML = '<input type="text" id="minhaArea' + cont + '"/> <input type="button" onClick="apaga(' + cont + ')" value="-"/> ';

document.getElementById("minhaArea" + cont).focus();

cont++;

}

};

 

var apaga = function(id) {

var n = document.getElementById("minhaArea");

var oF = document.getElementById("f" + id);

var OFI = document.getElementById("g" + id);

var apagado = n.removeChild(oF);

var apagados = n.removeChild(OFI);

//cont--; not required

disp();

};

 

var disp = function() {

cont = 0;

nums = [];

 

for (i = 0; i < maximum; i++)

{

if (document.getElementById("f" + i))

{

nums[cont] = document.getElementById('minhaArea' + i).value;

cont++;

}

}

 

var n = document.getElementById("minhaArea");

n.innerHTML = "";

for (i = 0; i < nums.length; i++)

{

var oF = document.createElement("div");

var oFI = document.createElement("div");

oF.setAttribute("id", "f" + i);

oFI.setAttribute("id", "g" + i);

n.appendChild(oF);

n.appendChild(oFI);

document.getElementById("f" + i).innerHTML = 'Telefone ' + (i + 1) + ': ';

document.getElementById("g" + i).innerHTML = '<input type="text" id="minhaArea' + i + '"/ value="' + nums + '"> <input type="button" onClick="apaga(' + i + ')" value="-"/> ';

 

}

};

 

</script>

</body>

</html>

Edited by dsonesuk
Link to comment
Share on other sites


 

var disp = function() {

cont = 0; //reset cont to 0

nums = []; // create array to store current telephone numbers

//remember array index starts from 0 so index will be 0 to 3

for (i = 0; i < maximum; i++) // create for to loop from 0 to less than max 4 (3)

{

if (document.getElementById("f" + i))// check if id f0 to f3 exist (this could be input id as below, as it would give the same result)

{

//if above id exist store current value of input in array

nums[cont] = document.getElementById('minhaArea' + i).value;

cont++; // increment cont by one everytime value is stored

}

}

 

var n = document.getElementById("minhaArea");

n.innerHTML = ""; //clear all content from element using above id

for (i = 0; i < nums.length; i++)// loop through number of values stored

{ // this code below is basically the same when input first created, the only difference is the stored values in array num are inserted in the value attribute of inputs

var oF = document.createElement("div");

var oFI = document.createElement("div");

oF.setAttribute("id", "f" + i);

oFI.setAttribute("id", "g" + i);

n.appendChild(oF);

n.appendChild(oFI);

document.getElementById("f" + i).innerHTML = 'Telefone ' + (i + 1) + ': ';

document.getElementById("g" + i).innerHTML = '<input type="text" id="minhaArea' + i + '"/ value="' + nums + '"> <input type="button" onClick="apaga(' + i + ')" value="-"/> ';

 

}

};

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...