Why it is not printing the character in a paragraph?

Question

Write a script that inputs an integer code for a character and displays the corresponding character.

It should print in a paragraph.

function character() {
    var input = document.getElementById( "input" );
    var code = document.getElementById( "output" ).innerHTML = input;
    output.value = String.fromCharCode( code );
}

<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

A P is not a form element. Also if you use form.fieldName, you need to use name="" instead of id=""; otherwise use document.getElementById for all fields and ignore the form.

You need to use innerHTML or innerText/textContent for a paragraph

document.getElementById("output").innerHTML=...

function character() {
  var form = document.getElementById("form");
  var code = parseInt(form.input.value,10); // radix 10 to make decimal
  document.getElementById("output").innerHTML = String.fromCharCode(code);
}

<form id="form">
  <input name="input" type="text" size="10">
  <br>
  <input type="button" value="click here" onclick="character()" id="button">
  <br>
  <p id="output" ></p>
</form>

edited May 23 '17 at 11:43

Community

1
1

answered May 31 '15 at 14:27

mplungjan

169,008
28
173
236

i must make it in p@mplungjan – Mark Mark May 31 '15 at 14:30
See update with additional fixes - I may have given you too much information for a homework assignment – mplungjan May 31 '15 at 14:36
That is the [radix](http://en.wikipedia.org/wiki/Radix). It is needed to handle people inputting something beginning with 0x where x is < 9 since that is considered [octal](http://en.wikipedia.org/wiki/Octal) – mplungjan May 31 '15 at 14:41
it gives me this Vote Up requires 15 reputation @mplungjan – Mark Mark May 31 '15 at 15:12
Yes. My favourite. I read the first and second edition to pieces [JavaScript, the Definitive Guide](http://amzn.to/1SLwAkp) - now in 6th edition. – mplungjan May 31 '15 at 15:30

Raúl Martín · Answer 2 · 2015-05-31T14:42:00.090

You have the problem for access to the elements inside a form.

document.getElementById("form").elements['input']

But this only works with form elements, not with other HTML elements.

In this of elements, you can use id or name but for historical reasons.

You have another way here:

function character() {
  var input = document.getElementById("input"),
      output = document.getElementById("output");
      output.innerHTML = String.fromCharCode(parseInt(input.value), 10) || '';
}

<form id="form">
  <input id="input" type="text" size="10">
  <br>
  <input type="button" value="click here" onclick="character()" id="button">
  <br>
  <p id="output" ></p>
</form>

score 1 · Answer 3 · answered May 31 '15 at 14:46

1

Here, this works:

<script>
function character() {
var ChrCode = document.getElementById("input").value;
document.getElementById("output").innerText = ChrCode + " = " + String.fromCharCode(ChrCode);
//output.value = String.fromCharCode( code );
}
</script>

<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" >Output</p>

answered May 31 '15 at 14:46

Lance

3,824
4
21
29

Sure thing, @MarkMark – Lance May 31 '15 at 14:53

Why it is not printing the character in a paragraph?

3 Answers3