Write multiple strings on the same id

Question

Let's say I have the input of 'Fred'. How can I print it so that it looks like this?

Character List:

F

r

e

d

And that it is all being written to a paragraph element in html with the id = 'msg2'

So far all that I can get it to write is either F or d

Apologies, forgot to include code

function start () {
    var vName = document.getElementById('custname').value;
    var vLength = processString(vName);

    document.getElementById('msg1').innerHTML = vName;
    document.getElementById('msg2').innerHTML = vLength;
}

function processString (pString) {

    for (i = 0; i < pString.length; i++) {
        t = i + 1
        var vReturnName = ('Character list: <br />' + (pString.substring(i, t)))
    }
    return (vReturnName);
}

@Jai I forgot to add the code. I have added it now – Ghrafkly Apr 19 '17 at 05:55 — Ghrafkly, Apr 19 '17 at 05:55

score 1 · Answer 1 · answered Apr 19 '17 at 05:36

1

Split the string and use forEach to loop over the array then create new element and just put it in the DOM:

let str = "FRED";

str.split('').forEach(s => {
  let p = document.createElement('p');
  p.textContent = s;
  document.body.appendChild(p);
})

p{border-bottom:solid 1px #c8c8c8;}

answered Apr 19 '17 at 05:36

Jai

74,255
12
74
103

@Rajesh Apologies. I forgot to include the code. I have done that now – Ghrafkly Apr 19 '17 at 05:53

score 0 · Answer 2 · answered Apr 19 '17 at 05:34

Use String#split to get array of each character.

Use Array#join to get the string concatenated with <br><br>

var name = "Fred";
var newName = name.split('').join('<br><br>');
document.getElementById('msg2').innerHTML = newName;

<div id='msg2'></div>

score 0 · Answer 3 · answered Apr 19 '17 at 05:34

You have to split up the text and append it to the div like so:

var string = 'Fred';
var characters = string.split('');
for(var i=0; i< characters.length; i++)
{
  $('#msg2').append(characters[i]+'<br/>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = 'msg2'></div>

If using Pure JS:

    var string = 'Fred';
    var characters = string.split('');
    for(var i=0; i< characters.length; i++)
    {
      document.getElementById('msg2').innerHTML+=characters[i]+'<br/>';
    }

    <div id = 'msg2'></div>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Your code has few issues:

var vReturnName = inside loop will always have last value as you are overriding it. Move declaration outside loop and the use vReturnName += to append
(pString.substring(i, t)) This will give you single character but you are not adding <br/> after it and so you will have no line-breaks. Also you can use string.charAt instead of it.
for (i = 0; Any variable defined without var|let|const becomes global.

function start() {
  var vName = document.getElementById('custname').value;
  var vLength = processString(vName);

  document.getElementById('msg1').innerHTML = vName;
  document.getElementById('msg2').innerHTML = vLength;
}

function processString(pString) {
  var vReturnName = 'Character list: <br />'
  for (i = 0; i < pString.length; i++) {
    t = i + 1
    vReturnName += (pString.substring(i, t) + "<br/>")
  }
  return (vReturnName);
}

<input type="text" id="custname" />
<button onclick="start()">Process String</button>
<div id="msg1"></div>
<div id="msg2"></div>

Alternate solution:

function start() {
  var vName = document.getElementById('custname').value;
  var vLength = processString(vName);

  document.getElementById('msg1').innerHTML = vName;
  document.getElementById('msg2').innerHTML = vLength;
}

function processString(pString) {
  var vReturnName = wrapInP('Character list:')
  for (var i = 0; i < pString.length; i++) {
    vReturnName += wrapInP(pString.charAt(i))
  }
  return vReturnName;
}

function wrapInP(str){
  return "<p>" + str + "</p>"
}

<input type="text" id="custname" />
<button onclick="start()">Process String</button>
<div id="msg1"></div>
<div id="msg2"></div>

References:

So, you are effectively giving each letter in the string its own temporary paragraph element? — Ghrafkly, Apr 19 '17 at 06:27
Yes. You can either do that or have a `div` as they are block element. This prevents us from using `
` — Rajesh, Apr 19 '17 at 06:28
Awesome, thanks. I had this in the back of my mind, but no idea how to. — Ghrafkly, Apr 19 '17 at 06:30

Write multiple strings on the same id

4 Answers4

Alternate solution:

References: