Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
.democlass {
  color: red;
}
.otro{
  color: blue;
}
</style>
</head>
<body>
<main>
<h1>Primero</h1>
<h1>Segundo</h1>

<p>Click en el boton para cambiar el color de la etiqueta h1 y aplicarle la clase</p>

<p><span onclick="myFunction()">Boton primero</span></p>
<p><span onclick="myFunction2()">Boton segundo</span></p>
<p><span onclick="anadirElemento()">Añadir elemento</span></p>
<form>
<select name="nombre">
  <option value="sandra">Sandra</option>
  <option value="antonio">Antonio</option>
  <option value="ana">Ana</option>
</select>
<input type="text" name="eso"/>
</form>
</main>
<script>
function myFunction() {
  document.getElementsByTagName("H1")[0].setAttribute("class", "democlass"); 
  var s=document.getElementsByTagName("select")[0].value;
  alert ("la variable vale:"+s);

}
function anadirElemento(){
  const option = document.createElement('option');
  const valor = "Pepa";
  option.value = valor;
  option.text = valor;
  document.getElementsByTagName("select")[0].appendChild(option);
}
function myFunction2() {
  document.getElementsByTagName("H1")[1].setAttribute("class", "otro"); 

}
opcionCambiada = () => {
  for(let i=0;i<document.getElementsByTagName("input")[0].value;i++){
            const input = document.createElement('input');
            const valor = "Pepa";
            input.value = valor;
            input.text = valor;
			input.id = "campo"+i;
            document.getElementsByTagName("form")[0].appendChild(input);
  }
  alert("Cambio a:"+document.getElementsByTagName("input")[0].value);
};

document.getElementsByTagName("input")[0].addEventListener("change", opcionCambiada);
</script>

</body>
</html>
Editor is loading...