-1

I need to have whatever words are entered into this input to be spit out (onclick) in the div as an ordered list of one word on each line/element. 1. How do I tell the function to put the words into the list (I know I have to split them somehow, but I don't know how to do that) 2. How do I get the list into the div after that? Javascript only please. Thanks!

EDIT: started a function, now how do I make it put the splits into the ul and then put that in the div? Also is my var split to get the input of the input box right?

<script>
function function1()
{
var split= document.getElementById('theInput').value.split(' ')
var var1 = split[0];
var var2 = split [1];
var var3 = split [2];
}
</script>
<h1 id="header">The document header.</h1>
<img id="theImage" src="http://www.uiowa.edu/homepage/images/dome-wm-mobile.gif">
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="function1"></p>
<ul id="theList">
<li id="element1">Element 1
<li id="element2">Element 2
<li id="element3">Element 3
</ul>
<div id="theDiv"></div>
0

2 Answers 2

1

Hope this is what you are looking for

function splitText()
{
    var textString = document.getElementById("splitText").value;

    var stringArray = new Array();
    stringArray = textString.split(" ");

    var outputString = "<ul>";
    for (i = 0; i < stringArray.length; i++) {
        outputString += "<li>"+ stringArray[i] + "</li>";
    }
    outputString += "</ul>";
    document.getElementById("output").innerHTML = outputString;
}

Here is the HTML code

<input id="splitText" type='text'/>
  <div id='output' style='width:100px;height:100px;border: 1px solid' onclick='splitText()'>
4
  • I think this is what I'm trying to do, thanks! How do I get the result output in a div as a list?
    – Uni
    Dec 19, 2013 at 6:04
  • When you click on the box (div) it will out put the result to the div as a list
    – Dilantha
    Dec 19, 2013 at 6:06
  • Hm I must not be doing it right. does the HTML code part go in the body? Or in the div?
    – Uni
    Dec 19, 2013 at 6:11
  • List will get append to the div. What do you meant by "I must not be doing it right" ?
    – Dilantha
    Dec 19, 2013 at 6:26
0

Here you go

The markup:

<p>Input:<input type="text" id="theInput" value="" size=10>
<input type="button" id="button1" value="click" onclick="function1();"></p>
<ul id="theList">
</ul>
<div id="div1"></div>

JavaScript:

function function1() {
    var words = document.getElementById("theInput").value.split(" ");
    console.log(words.length);
    for(var i = 0; i < words.length; ++i) {
        var obj = document.createElement('li');
        obj.id = "list"+i;
        obj.innerHTML = words[i];
        document.getElementById("theList").appendChild(obj);
    }
}

A friendly tip: Consider working on your naming convention!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.