1

Buenas, mi objetivo es que al introducir un texto en el input, el párrafo cuya id es "mi titulo", cambie por el texto introducido en dicho input. Seguramente e es que no este bien el código Js.

HTML

<html>
<head>
  <script src="DH16.js"></script>
  <link rel="StyleSheet" href="DH16.css" type="text/css">
</head>
<body id="cuerpo">
  <header>
    <h1 id="titulo">
      Editor de Titulos
    </h1>
  </header>
  <p id="principal">
    Mi titulo
  </p>
   <br>
   <br>
   <div id="todo">
     Titulo:
     <input type="text" id="newtitulo">
     <input type="button" value="Cambiar titulo" onclick="cambiarTitulo()">
   </div>
  </body>
 </html>

JavaScript

  function cambiarTitulo() {
var titulo=document.getElementById('newtitulo');
var principal=document.getElementById('principal');
principal=titulo;
}

CSS

#principal {
  font-size:15px;
  border:1px solid #000000;
  background-color: #ffff00;
}

#titulo {
  text-align: center;
  font-size: 45px;
  color: #D7DBDD;
  font-family: "PCBius";
  padding:15px;
  margin:15px;
}

#cuerpo{
  background-image: url('negro.jpg');
}

#todo{
  color: white;
  font-size:18px;
}

1 respuesta 1

5

Así es, tu código de JS no esta correcto, la forma correcta seria:

function cambiarTitulo() {

//Obtenemos el valor del input
var titulo=document.getElementById('newtitulo').value; <-- Notese el .value

//Aplicamos el valor de la variable titulo
document.getElementById('principal').innerHTML=titulo;

}

Y si lo quieres mas chulo:

Pon un evento onKeyUp sobre el input

......
<div id="todo">
     Titulo:
     <input type="text" id="newtitulo" onKeyUp="javascript:dataBinding(this)">
     <!--<input type="button" value="Cambiar titulo" onclick="cambiarTitulo()">-->
   </div>
......

function dataBinding(elem){
  //Obtenemos el valor del input
  var titulo=elem.value; 

  //Aplicamos el valor de la variable titulo
  document.getElementById('principal').innerHTML=titulo;
}

Aqui el jsfiddle

4
  • Perfecto, muchas gracias¡ el 9 ago. 2017 a las 8:46
  • Si te sirvió, no dudes en marcarla como aceptada ;)
    – Hictus
    el 9 ago. 2017 a las 8:51
  • El onKeyUp supera mis conocimientos pero me informare, muchas gracias :) PD: Aceptado el 9 ago. 2017 a las 8:57
  • El onkeyup te está enviando el valor cada vez que dejas de apretar una tecla, es como para verlo más actualizado al momento, de hecho la misma palabrate lo dice "On KEY UP" o "cuando la tecla suba"
    – ESCM
    el 9 ago. 2017 a las 10:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.