I want to get only the first letter of what is written in the input. Can help me?

<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>

<script type="text/javascript">
function copyText(texteId, text1Id) {
  var data = document.getElementById(texteId).value;
  document.getElementById(text1Id).innerHTML = data;
}
</script>

I want to get only the first letter of what is written in the input. Can help me?

<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>

<script type="text/javascript">
function copyText(texteId, text1Id) {
  var data = document.getElementById(texteId).value;
  document.getElementById(text1Id).innerHTML = data;
}
</script>

• javascript
• input

• 2 Maybe try data.charAt(0); – NewToJS Commented Feb 27, 2018 at 0:52
• Possible duplicate of Get first letter of each word in a string, in Javascript – vol7ron Commented Feb 27, 2018 at 0:58
• @michael-myers perhaps you should still to the Java and C questions, like you're used to – vol7ron Commented Feb 27, 2018 at 4:22

4 Answers 4

Yes you can split the variable data as an array:

function copyText(texteId, text1Id) {
  var data = document.getElementById(texteId).value[0];
  document.getElementById(text1Id).innerHTML = data;
}

<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>

Use [number] to get the value at some point.

Or you could use the slice() function:

function copyText(texteId, text1Id) {
  var data = document.getElementById(texteId).value;
  document.getElementById(text1Id).innerHTML = data.slice(0,1);
}

<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>

Or as suggested in the other answer charAt().

Use charAt(0) to get the first character:

function copyText(inputId,displayId) {
  var data = document.getElementById(inputId).value;
  var firstLetter = data.charAt(0);
  document.getElementById(displayId).innerHTML = "The first letter is: " + firstLetter;
}

<label for ="texte">Type your name here</label>
<input id="texte" type="text" onkeyup="copyText('texte','text')">
<p id="text"></p>

function copyText( texteId, text1Id ) {
  var d = document;
  d.g = d.getElementById;
  var data = d.g( texteId ).value[0];
  d.g( text1Id ).innerHTML = data;
}

<input id="texte" type="text" placeholder="type your name here" oninput="copyText('texte', 'text')">
<div id="text">first letter here</div>

In JavaScript you may treat a string as if it were an array. So by specifying the zeroeth index of value, the code grabs the first letter and that bees the content of the div with the id of "text" using that element's innerHTML property.

const input = document.querySelector('#texte');
const text = document.querySelector('#text');

// keydown and keyup are alternate events
input.addEventListener('input', function() {
  text.innerHTML = this.value[0];
});