Javascript output not showing

Tell us what’s happening:

Hi guys I’m trying to write code that removes some special characters from any string URL
and then displays the cleaned string via html.
the javascript works but I can’t seem to get the result to show in the browser. pls help!

Your code so far

<!DOCTYPE html>
        <title>Clean URLs</title>
       <div id="display-area" >
            <textarea placeholder="insert URL here :)" id="myTextarea"></textarea>
            <button class = 'btn btn-default' id="demo"> Cleanup URL</button>

       <div id ="result1"><p></p></div>
       <div id ="result2"><p></p></div>
        var splitstring = [''];
        var finaloutput = ''; var i = 0;
      function cleanupurl(urlstring) {
        urlstring = urlstring.replace(/%21/gi, '!'); 
        urlstring = urlstring.replace(/%23/gi, '#');
        urlstring = urlstring.replace(/%24/gi, '$');
        urlstring = urlstring.replace(/%26/gi, '&');
        splitstring = urlstring.split('http://');
        document.getElementById("result1").innerHTML =  cleanurloutput1();
  function cleanurloutput1(){
     return splitstring[1];
          function cleanurloutput2(){
     return splitstring[2];

        //document.getElementById("result1").innerHTML = cleanurloutput1();
        var x = document.getElementById("myTextarea").value;

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/604.3.5 (KHTML, like Gecko) Version/11.0.1 Safari/604.3.5.

Link to the challenge:

You did not include an answer to “Tell us what’s happening”. What have you tried? What isn’t working as expected? What tests are failing? What don’t you understand? What do you understand?

You have a function called cleanupurl which runs when the page loads in the following line:


When the page loads, nothing is in the textarea element with id=“myTextarea”, so x is just a blank string. When the cleanupurl function is executed, the urlstring argument is still a blank string. After the next line of code runs (see below):

splitstring = urlstring.split("http://");  // [""]

splitstring is now an array with one blank string inside of it.

Finally, you have the following line:

document.getElementById("result1").innerHTML = cleanurloutput1();

You replace the inner html of the div with id=“result1” with the value returned from the cleanurloutput1 function. What does clearurloutpu1 return? It returns undefined, because you reference splitstring[1], which is a non-existent second element of the splitstring array. Remember from above splitstring only has one element and it is a blank string. When you reference a non-existent array element, JavaScript gives you undefined.

A second issue you have in your code is that unless you preload the textarea element with a specific value, your current code will not do anything with anything you type into the textarea input. You need to add an event handler to the “Cleanup URL” button, so that it executes the cleanupurl.

1 Like

wow, thanks for the response…
the whole point of the code is to have someone put in input and then the input
is then cleaned up and the result is then inserted in “result1” and/or “result2”

so when the page loads and the user types something in “myTextarea” and clicks the button,
cleanup url(x) is supposed to run.

As for the eventhandler for the button, which one could I use to get it to work…
I tried onclick=“cleanupurl(myTextarea.text())”. it didn’t work either…

pls help ;(

Thanks for the response…
but the code is supposed to take out the ‘percentage characters’ in any encoded URL and replace them with their correct special characters… e.g. replace ‘%21’ with ‘!’

it provides a text area where a user can paste their url, click the button and then have the program ‘clean it up’

so far, nothing happens… how do I fix it ?

Instead of adding the onclick to the html, it is better to separate the JavaScript from the html by adding the following to your JavaScript section

var button = document.getElementById("demo");
button.addEventListener('click', function(){

The above assume you have fixed the issue I discussed above regarding the following line:

document.getElementById("result1").innerHTML = cleanurloutput1();

Think about what you want to assign to the result section. You already have a variable you could use here.

1 Like

it works!!!37 AM
Thanks sooo much!
got rid of. cleanurloutput1() and used a loop to display all elements
in the array as shown below:

while(i < splitstring.length){
        document.getElementById("result1").innerHTML +=  "<p>" + splitstring[i] ;

Thanks a bunch!!!
thanks for the help!