Here is my JavaScript code:
function foo(){
var pagingButtons = document.createElement('div');
for(var j = 0; j < pagingObjects.length; j++ )
{
var pagingBtn = CreateHTMLElement("btnPaging"+j.toString(), "btnPaging", ShowPage, 'button', pagingObjects[j].value);
pagingBtn.setAttribute('data-start', pagingObjects[j].start);
pagingBtn.setAttribute('data-end',pagingObjects[j].end);
pagingButtons.appendChild(pagingBtn);
}
}
pagingArea.appendChild(table).appendChild(pagingButtons);
}
function CreateHTMLElement(id, name, onclick, type, value) {
var HTMLElement = document.createElement('input');
HTMLElement.id = id;
HTMLElement.name = name;
HTMLElement.onclick = onclick;
HTMLElement.type = type;
HTMLElement.value = value;
return HTMLElement;
}
I need to get from pagingArea button with id=btnPaging0.
How can I implement it?
document.getElementById("btnPaging0");
Related
function url_info()
{
var url_val=document.getElementsByClassName("spc-tab");
var current_s=0;
for(var i=0;i<url_val.length;i++)
{
var url_class=url_val[i].className.split(" ");
if(url_class[1]!=null)
{
if(url_class[1]=="selected")
{
current_s=i;
break;
}
}
}
var temp_1=url_val[current_s].text; //**Error here**
return(temp_1);
}
In this function url_info i am getting the TypeError But i don't know why?? .... as My var current_s is defined within the scope and integer...
why write this much of code when one line can do:
function url_info() {
var temp_1 = "";
var url_val = document.querySelector(".spc-tab.selected");
temp_1 = url_val[0].text > 0 ? url_val[0].text : temp_1;
return (temp_1);
}
and second, you don't require to convert your class name to string then split. You just can access them through classlist. Then use contains.
function url_info() {
var url_val = document.getElementsByClassName("spc-tab");
var current_s = 0;
for (var i = 0; i < url_val.length; i++) {
var isSelected = url_val[i].classList.contains("selected");
if (isSelected) {
current_s = i;
break;
}
}
var temp_1 = url_val[current_s].text;
return (temp_1);
}
Using either Javascript or HTML, I have a dynamic form that refreshes/updates each time the user adds data to the table. It even has a 'modify' button and an 'erase' button to delete that particular line. However, one last thing I want to add is a button that would allow the user to upload a picture that would fit in the very last slot of the column. How do I achieve it in such a way that every time the user 'adds' the data (and another row is formed) with that particular image, the next time he wants to add another row he is able to select another image?
window.onload = load;
var id = 1;
var colEmpleados = [];
var colSectores = [{id:1, nombre:"Sector 1"},
{id:2, nombre:"Sector 2"},
{id:3, nombre:"Sector 3"}];
function load()
{
var btnAgregar = document.getElementById("btnAgregar");
btnAgregar.onclick = agregar;
var btnConfirmar = document.getElementById("btnConfirmar");
btnConfirmar.onclick = confirmarModificacion;
var btnCancelar = document.getElementById("btnCancelar");
btnCancelar.onclick = cancelar;
cargarSelectSectores();
habilitarIngreso();
}
function habilitarIngreso()
{
var rowA = document.getElementById("rowAgregar");
rowA.style.display = 'block';
var rowM = document.getElementById("rowModificar");
rowM.style.display = 'none';
}
function habilitarModificar()
{
var rowM = document.getElementById("rowModificar");
rowM.style.display = 'block';
var rowA = document.getElementById("rowAgregar");
rowA.style.display = 'none';
}
function confirmarModificacion()
{
var idEmpleado = document.getElementById("idEmpleado").value;
for(var i = 0; i<colEmpleados.length;i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
colEmpleados[i].nombre = document.getElementById("txtNombre").value;
colEmpleados[i].apellido = document.getElementById("txtApellido").value;
colEmpleados[i].sector = document.getElementById("sltSector").value;
colEmpleados[i].edad = document.getElementById("txtEdad").value;
colEmpleados[i].ingreso = document.getElementById("dtpIngreso").value;
}
}
mostrar();
habilitarIngreso();
limpiarForm();
}
function cancelar()
{
habilitarIngreso();
limpiarForm();
}
function borrar()
{
var idEmpleado = this.getAttribute("idEmpleado");
for(var i=0; i<colEmpleados.length; i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
colEmpleados.splice(i,1);
}
}
mostrar();
}
function modificar()
{
habilitarModificar();
var idEmpleado = this.getAttribute("idEmpleado");
for(var i=0; i<colEmpleados.length; i++)
{
if(colEmpleados[i].idEmpleado == idEmpleado)
{
document.getElementById("idEmpleado").value = colEmpleados[i].idEmpleado;
document.getElementById("txtNombre").value = colEmpleados[i].nombre;
document.getElementById("txtApellido").value = colEmpleados[i].apellido;
document.getElementById("sltSector").value = colEmpleados[i].sector;
document.getElementById("txtEdad").value= colEmpleados[i].edad;
document.getElementById("dtpIngreso").value= colEmpleados[i].ingreso;
}
}
mostrar();
}
function cargarSelectSectores()
{
var selectSectores = document.getElementById("sltSector");
selectSectores.innerHTML = "<option id='0'>--- Sectores ---</option>";
for(var i = 0; i<colSectores.length; i++)
{
selectSectores.innerHTML +="<option id="+colSectores[i].id+">"+colSectores[i].nombre+"</option>";
}
mostrar();
}
function agregar()
{
var nombre = document.getElementById("txtNombre").value;
var apellido = document.getElementById("txtApellido").value;
var sector = document.getElementById("sltSector").value;
var edad = document.getElementById("txtEdad").value;
var fechaIngreso = document.getElementById("dtpIngreso").value;
var empleado = {};
empleado.idEmpleado = id;
empleado.nombre = nombre;
empleado.apellido = apellido;
empleado.sector = sector;
empleado.edad = edad;
empleado.ingreso = fechaIngreso;
colEmpleados.push(empleado);
id++;
limpiarForm();
mostrar();
}
function limpiarForm()
{
var colInputs = document.getElementsByTagName("input");
for(var i = 0; i<colInputs.length; i++)
{
if(colInputs[i].type != "button")
{
colInputs[i].value = "";
}
}
document.getElementById("sltSector").value = "0";
}
function mostrar()
{
var bodyTabla = document.getElementById("datosEmpleados");
bodyTabla.innerHTML = "";
for(var i = 0; i<colEmpleados.length; i++)
{
var emp = colEmpleados[i];
bodyTabla.innerHTML +="<tr><td>"+emp.idEmpleado+"</td><td>"+emp.nombre+"</td><td>"+emp.apellido+"</td><td>"+emp.edad+"</td><td>"+emp.sector+"</td><td>"+emp.ingreso+"</td><td><input class='btnBorrar' type='button' value='Borrar' idEmpleado="+emp.idEmpleado+" /></td><td><input class='btnModificar' type='button' value='Modificar' idEmpleado="+emp.idEmpleado+" /></td></tr>";
}
var colBotones = document.getElementsByClassName("btnBorrar");
for(var i = 0; i<colBotones.length; i++)
{
colBotones[i].onclick = borrar;
}
var colBotonesModificar = document.getElementsByClassName("btnModificar");
for(var i = 0; i<colBotonesModificar.length; i++)
{
colBotonesModificar[i].onclick = modificar;
}
}
Thanks in advance!
I have a class who has a method generating 100 input text.
And I want to add another method (to set a instance property for example) in these input text.
Here the code below :
<div id="container"></div>
<script type="text/javascript">
container = document.getElementById("container");
//Class :
function Foo(age)
{
//Attribute :
this.age = age;
//Setter :
this.setAge = function(age)
{
this.age = age;
console.log(this.age);
};
this.displayInputText = function()
{
for(var i = 0; i < 100; i++)
{container.innerHTML += '<input type="text" onkeyup="'+this.setAge(value)+';">';}
};
}
foo1 = new Foo(32);
foo1.displayInputText();
</script>
But onkeyup="'+this.setAge(value)+'" generates javascript error in console, so it doesn't work.
Have you an idea ?
Thank you, cordially.
this.setAge returns undefined, so your line translates to
{container.innerHTML += '<input type="text" onkeyup="undefined">';}
If you want to use whatever value given in this input box to be set as setAge then you need to use addEventListener.
var self = this;
for (var i = 0; i < 10; i++)
{
var inputEl = document.createElement( "input" );
inputEl.addEventListener("keyup", function(){
self.setAge( this.value );
});
container.append( inputEl );
}
Demo
<div id="container"></div>
<script type="text/javascript">
container = document.getElementById("container");
//Class :
function Foo(age) {
//Attribute :
this.age = age;
//Setter :
this.setAge = function(age) {
this.age = age;
console.log(this.age);
};
this.displayInputText = function() {
var self = this;
for (var i = 0; i < 10; i++)
{
var inputEl = document.createElement( "input" );
inputEl.addEventListener("keyup", function(){
self.setAge( this.value );
});
container.append( inputEl );
}
};
}
foo1 = new Foo(32);
foo1.displayInputText();
</script>
I have to create an input box multiple times, so I call a function like this multiple times:
function __createInputBox(id) {
var input = document.createElement("input");
input.setAttribute('id', id);
input.setAttribute('type', 'number');
input.setAttribute('name', id);
input.setAttribute('value', '0');
input.setAttribute('min', '0');
return input;
}
In my main function, I append it as such:
var box = __createInputBox(id);
element.appendChild(box);
I keep getting this error:
__createInputBox is not defined
So are we allowed to return the value from document.createElement("element")? If its bad to do so, what is the better way to add multiple elements to the page?
This how I declare the function:
function InputSpace(){
this.inputSpace = document.getElementById("inputspace");
this.num = 1;
function __createInputBox(id) {
// function declared here
}
This is the code where I call it:
InputSpace.prototype = {
constructor: InputSpace,
drawInputSpace : function () {
var i = 0,
max;
var table = document.createElement("TABLE");
var table_body = document.createElement("TBODY");
for(max = num; i<num; i++){
var element = document.createElement("TR");
var box = __createInputBox(id);
element.appendChild(box);
table_body.appendChild(element);
}
table.appendChild(table_body);
this.inputSpace.appendChild(table);
}
After reading the comments, we can return document.createElement("element") in from a function. The reason for the function is undefined error, was because I was calling a function outside its scope. The proper way to call an object's private function is shown here
Changing the code to access private functions properly:
function InputSpace(){
// public attributes
this.inputSpace = document.getElementById("inputspace");
this.num = 1;
}
InputSpace.prototype = (function(){
// private functions
var __createInputBox(id){
var input = document.createElement("input");
input.setAttribute('id', id);
input.setAttribute('type', 'number');
input.setAttribute('name', id);
input.setAttribute('value', '0');
input.setAttribute('min', '0');
return input;
};
return {
constructor: InputSpace,
// public functions
drawInputSpace : function () {
var i = 0,
max;
var table = document.createElement("TABLE");
var table_body = document.createElement("TBODY");
for(max = num; i<num; i++){
var element = document.createElement("TR");
var box = __createInputBox(id);
element.appendChild(box);
table_body.appendChild(element);
}
table.appendChild(table_body);
this.inputSpace.appendChild(table);
}
})();
I have following issue.
I have array of objects, and when I want to get one of the items and update data, it updates last data.
for example:
var arr = [];
for (var i = 0; i < 8; i++){
var c = new MyClass1(i);
arr.push (c)
}
and the MyClass1
(function () {
var score = 0;
function MyClass1(id){
this.id = id;
this.x = 100;
//some code. not important
}
var p = MyClass1.prototype;
p.updateScore = function (s){
score = s;
}
window.MyClass1 = MyClass1;
}());
and function which returns one of these classes
var getMyClassesById = function(/* int */ id){
var size = arr.length;
for (var i = 0; i<size; i++){
if (id == arr[i].id){
return arr [i];
}
}
}
Finally I'm calling function and want to update Score
getMyClassesById(1).updateScore (122);
it's updates last index item Score, and calls last item "updateScore" function... why?
but when i'm changing some other property its changes correctly for example "x". I can't understand is here something not right with prototypes?
Your variable score is not defined as a member of MyClass - it is only defined in the scope of your closure. Your code will work, but there will only be 1 "score" for all instances of MyClass.
If score is supposed to be part of MyClass then move it
function MyClass1(id){
this.id = id;
this.x = 100;
this.score = 0
//some code. not important
}
And update the method:
var p = MyClass1.prototype;
p.updateScore = function (s){
this.score = s;
}
(function () {
function MyClass1(id){
this.id = id;
this.x = 100;
this.score = 0;
//some code. not important
}
var p = MyClass1.prototype;
p.updateScore = function (s){
this.score = s;
}
window.MyClass1 = MyClass1;
}());
var arr = [];
for (var i = 0; i < 8; i++){
var c = new MyClass1(i);
arr.push (c)
}
var getMyClassesById = function(/* int */ id){
var size = arr.length;
for (var i = 0; i<size; i++){
if (id == arr[i].id){
return arr [i];
}
}
}
getMyClassesById(1).updateScore (122);
console.log(arr);