0

I have this html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notas</title>

    <script type="text/javascript" src="notas.js"></script>

</head>
<body>

    <p>Nombre alumno: </p>
    <input type="text" name="nombre" id="nombre">
    <p>Nota alumno:</p>
    <input type="text" name="nota">

    <p><br></p>
    <input type="button" name="boton" value="Enviar" onclick="respuesta()">

</body>
</html>

And this Javascript in another file:

function respuesta(){

    nombrej=document.getElementById("nombre");
    document.write(nombrej);
}

The problem is that when I click the button the message is "null" I have see solutions to a similar problem in the forum but I don't know what to do since there's a button. Help!

Little Lux
  • 11
  • 6
  • This JS is in another document? You've a pop-up or an iframe? – Teemu Sep 29 '16 at 18:03
  • Works for me: https://jsfiddle.net/1qa3vu1x/ Double-check that you are including the correct JS file. –  Sep 29 '16 at 18:04
  • 2
    I can't see any way that could possibly give a result other then a serialisation of an HTML input element … which is what I get when I [test the code](http://jsbin.com/zicafe/1/edit?html,output). You appear to have missed the "Ensure that the example actually reproduces the problem" step when you created your [MCVE]. – Quentin Sep 29 '16 at 18:04
  • What did you want to happen with **document.write(nombrej);**? – JonSG Sep 29 '16 at 18:06
  • where is `nombrej` going to? instead of `document.write`, have you tried the `DOM`, like `document.getElementById("nombre").value = "Johnny Bravo";` – medev21 Sep 29 '16 at 18:06
  • It's ***completely*** up to you, but I'm curious about why the change in accepted answer? – T.J. Crowder Oct 07 '16 at 11:12

2 Answers2

1

There are a couple of problems there:

  1. You haven't declared nombrej. (And shouldn't that be nombre?) That means your code is falling prey to The Horror of Implict Globals (that's a post on my blog). Declare your variables.

  2. You've set nombrej to the HTMLInputElement. You probably wanted its value, which is on its value property.

  3. Calling document.write once the page has been completed will implicitly call document.open, which wipes out the page and replaces it with what you write.

So respuesta might look something like this instead:

function respuesta(){

    var nombrej=document.getElementById("nombre").value;
//  ^^^--- #1                                    ^^^^^^--- #2
    console.log(nombrej);
//  ^^^^^^^^^^^--- #3
}

Side note: I see you've put your script tag in the head section. You'll find a lot of people doing that and telling you to do it, but it's an anti-pattern. Unless you have a specific reason to do something else, put script tags at the very end of body, just before the closing </body> tag. More in YUI's guidelines.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thank you so much! The problem were the lack of declaration and that I was missing the .value in the getElementById. – Little Lux Sep 29 '16 at 18:10
0

JavaScript getElementById returns the DOM element. To get the value of that text input, you need to get the value of it.

Instead of: nombrej=document.getElementById("nombre");

Use: nombrej=document.getElementById("nombre").value;

Examples: JavaScript: how to get value of text input field?

Community
  • 1
  • 1
MarkBowman
  • 61
  • 6
  • You forgot a period before `value` – joh04667 Sep 29 '16 at 18:08
  • The OP said that `nombrej` was `null`. Trying to read `.value` of `null` would throw an exception. – Quentin Sep 29 '16 at 18:08
  • I updated my post, thanks joh04667. @Quentin, you are correct. I read through the code and responded with what was the most obvious problem to me. T. J. Crowder's answer is more thoroughly answered. – MarkBowman Sep 29 '16 at 18:15