I am with an exercise in which I must show the model, plate and owner attributes of a class. I have put in an onclick the function to show but it executes without clicking. I've also tried removing the "everyone" argument from the onclick and putting it in the show function, but that didn't even send the data. I understand, then, that to present the functions in the events, the arguments should not be shown. But then how can I present such a function?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" id="marca" placeholder="marca">
<input type="text" id="modelo" placeholder="modelo">
<input type="text" id="placa" placeholder="placa">
<input type="text" id="color" placeholder="color">
<input type="text" id="duenho" placeholder="duenho">
<button type="button" id="boton">enviar</button>
<button type="button" id="ver">todos</button>
</form>
<script>
class Automovil{
constructor(marca, modelo, placa, color, duenho){
this.marca = marca;
this.modelo = modelo;
this.placa = placa;
this.color = color;
this.duenho = duenho;
}
todos = Array();
get marca(){
return this._marca;
}
set marca(x){
this._marca = x;
}
get modelo(){
return this._modelo;
}
set modelo(x){
this._modelo = x;
}
get placa(){
return this._placa;
}
set placa(x){
this._placa = x}
get color(){
return this._color;
}
set color(x){
this._color = x;
}
get duenho(){
return this._duenho;
}
set duenho(x){
this._duenho = x;
}
}
function crear(){
var brand = document.getElementById("marca").value;
var model = document.getElementById("modelo").value;
var numberPlate = document.getElementById("placa").value;
var colors = document.getElementById("color").value;
var owner = document.getElementById("duenho").value;
nuevo = new Automovil(brand, model, numberPlate, colors, owner);
todos.push(nuevo);
}
function mostrar(x){
var indice = x.length -1;
for($i = 0; $i <= indice; $i++){
var uno = todos[$i]._modelo + " " + todos[$i]._placa + " " + todos[$i]._duenho + ('\n');
document.write(uno + "<br>");
}
}
var ford = new Automovil("ford", "fiesta", "1234hh", "azul", "Paco");
var opel = new Automovil("opel", "corsa", "6543as", "rojo", "Pepe");
todos = [ford, opel];
boton.onclick = crear;
ver.onclick = mostrar(todos);
</script>
</body>
</html>
As always, thank you very much
I have added the following block of code that you needed to be able to execute the functions of the
onclick
The problem you had was that you were calling directly
boton
without taking into account that the variable had not been defined, which is done simply withvar boton;
The next thing you needed was to assign this button variable to the element from the DOM (or from your HTML). For this you use the function
document.getElementById(<nombre_del_elemento>)
, here you place the value of the ID that you have defined in your HTML, in this case it coincides with the name of the variable, but in itself it could be any name, with this you are linking your HTML with your Javascript.Once you make this relationship you can add events to your variable. In the case of events, you assign functions to the events which will be executed when the event is fired. Previously you had this code
Which assigned the result of the execution of the function
mostrar(todos)
and since it did not have any return value, it gave by valueundefined
so that every time the event was fired it would try to execute aundefined
, which does not make sense. This is why you should wrap this execution with another function so that it executes the show function when the event happens.The final corrected code would look like this: