I get the error [object HTMLSpanElement]

Question

I get the error [object HTMLSpanElement]

Navigation

#1 by (2 votes)

3

It shows me the names and documents along with dates but when I press the save button it shows everything except the selected subject, does anyone know how or why?

This is my code:

function insertartextos() {
  
  console.log("insertando textos.....");
  
  var input_cliente = document.getElementById("cliente");
  var input_cc = document.getElementById("cc");
  var input_materia = document.getElementById("materia");
  var input_fechada = document.getElementById("fechada");
  var etiqueta_nombre = document.getElementById("nombre");
  var etiqueta_documento = document.getElementById("documento");
  var etiqueta_clase = document.getElementById("clase");
  var etiqueta_fecha = document.getElementById("fecha");

  etiqueta_nombre.innerHTML = "Bienvenido " + input_cliente.value;
  etiqueta_documento.innerHTML =  "Su documento es " + input_cc.value;
  etiqueta_fecha.innerHTML = "Fecha " + input_fechada.value;

  var materiaselec = document.getElementById("materias");
  var clases = document.getElementById("clase");

  if (materias.value == "programacionA"){
    clase.innerHTML = clase;
  } else if (materias.value == "ingles"){
    clase.innerHTML = clase;
  } else if (materias.value == "diseño"){
    clase.innerHTML = clase;
  } else if (materias.value == "teoria"){
    clase.innerHTML = clase;
  } else if (materias.value == "interaccion"){
    clase.innerHTML = clase;
  } else if (materias.value == "estrategia"){
    clase.innerHTML = clase;
  } else if (materias.value == "propuesta"){
    clase.innerHTML = clase;
  }
}

<h1>Registro de clase</h1>
<p>Con los datos que nos proporcione podremos mantener su informacion para ayudarle con su asistencia a clases, agradecemos su colaboracion. </p>
<h3>nombre</h3>
<input type="text" id="cliente" placeholder="escribe nombre" />
<h3>documento</h3>
<input type="number" id="cc" placeholder="escribe tu nombre "/>

<h3>clase</h3>
<select id="materias">
  <option value="programacionA">programacion avanzada</option>
  <option value="ingles">ingles 3</option>
  <option value="diseño">diseño de sistemas</option>
  <option value="teoria">teoria general de sistemas</option>
  <option value="interaccion">interaccion humano computador</option>
  <option value="estrategia">diseño de estrategia</option>
  <option value="propuesta">propuesta de investigacion </option>
</select>
<h3>fecha</h3>
<input type="date" id="fechada" placeholder="escribe tu nombre "/>
<div><button type="button" onClick="insertartextos()">Guardar</button></div>

<h1>INFORMACION</h1>

<p id="nombre"></p>
<p id="documento"></p>
<span id="clase"></span>
<p id="fecha"></p>

javascript html

asked by sebastian sebas8786 lopez 09.08.2016 в 00:21

source

1 answer

Object reference not set as an instance of an object. Asp.net MVC How do I calculate the variance of an age group in sql?

score 2 · Answer 1

There are several problems in the code, let's see them, but the main idea is that you are trying to assign an object (of type HTMLSpanElement) instead of a string for innerHTML . . p>

When you do this:

clase.innerHTML = clase;

as clase is not a variable defined within your code, then the browser tries to find an element with id "class" that it will use instead (equivalent to document.getElementById("clase") , which does exist and is a% % co:

<span id="clase"></span>

And now comes the interesting part. In the previous JavaScript code

clase.innerHTML = clase;

what you are trying to do is assign as internal HTML of the element with ID "class", the element itself with ID "class". Since you are trying to assign an object to what should be a string, the browser does this by typing the object's type: span .

If what you want to do is show the selected subject, then the problem is that you are not assigning the correct value. I think what you're looking for is something like this (commented where I make changes):

function insertartextos() {
  
  console.log("insertando textos.....");
  
  var input_cliente = document.getElementById("cliente");
  var input_cc = document.getElementById("cc");
  var input_materia = document.getElementById("materia");
  var input_fechada = document.getElementById("fechada");
  var etiqueta_nombre = document.getElementById("nombre");
  var etiqueta_documento = document.getElementById("documento");
  var etiqueta_clase = document.getElementById("clase");
  var etiqueta_fecha = document.getElementById("fecha");

  etiqueta_nombre.innerHTML = "Bienvenido " + input_cliente.value;
  etiqueta_documento.innerHTML =  "Su documento es " + input_cc.value;
  etiqueta_fecha.innerHTML = "Fecha " + input_fechada.value;

  // en materiaselec tengo el select de las materias
  var materiaselec = document.getElementById("materias");
  // en materia tengo el texto del la opción seleccionada
  var materia = materiaselec.options[materiaselec.selectedIndex].innerHTML;

  // cambio clases a clase (sería esto o cambiar todos los clase.innerHTML de abajo
  var clase = document.getElementById("clase");

  if (materias.value == "programacionA"){
    clase.innerHTML = materia;
  } else if (materias.value == "ingles"){
    clase.innerHTML = materia;
  } else if (materias.value == "diseño"){
    clase.innerHTML = materia;
  } else if (materias.value == "teoria"){
    clase.innerHTML = materia;
  } else if (materias.value == "interaccion"){
    clase.innerHTML = materia;
  } else if (materias.value == "estrategia"){
    clase.innerHTML = materia;
  } else if (materias.value == "propuesta"){
    clase.innerHTML = materia;
  }
}

<h1>Registro de clase</h1>
<p>Con los datos que nos proporcione podremos mantener su informacion para ayudarle con su asistencia a clases, agradecemos su colaboracion. </p>
<h3>nombre</h3>
<input type="text" id="cliente" placeholder="escribe nombre" />
<h3>documento</h3>
<input type="number" id="cc" placeholder="escribe tu nombre "/>

<h3>clase</h3>
<select id="materias">
  <option value="programacionA">programacion avanzada</option>
  <option value="ingles">ingles 3</option>
  <option value="diseño">diseño de sistemas</option>
  <option value="teoria">teoria general de sistemas</option>
  <option value="interaccion">interaccion humano computador</option>
  <option value="estrategia">diseño de estrategia</option>
  <option value="propuesta">propuesta de investigacion </option>
</select>
<h3>fecha</h3>
<input type="date" id="fechada" placeholder="escribe tu nombre "/>
<div><button type="button" onClick="insertartextos()">Guardar</button></div>

<h1>INFORMACION</h1>

<p id="nombre"></p>
<p id="documento"></p>
<span id="clase"></span>
<p id="fecha"></p>