How to split an array upon button press using javascript

Question

2.00/5 (1 vote)

See more:

I have to split a phrase. First im not sure exactly how to do that, do I use

JavaScript

var str="my phrase here"
str. split=(" ")

Is there a way to not put the entire phrase, or do I have to put

JavaScript

var str="It’s that time of year when you clean out your
        closets, dust off shelves, and spruce up your floors. Once you’ve taken
        care of the dust and dirt, what about some digital cleaning? Going
        through all your files and computers may seem like a daunting task, but
        we found ways to make the process fairly painless"

also I would like to Iterate over that array, at each step and build SPAN elements as I go, along with the attributes
The html I have is

HTML

<div id="transcriptText"> It’s that time of year when you clean out your
        closets, dust off shelves, and spruce up your floors. Once you’ve taken
        care of the dust and dirt, what about some digital cleaning? Going
        through all your files and computers may seem like a daunting task, but
        we found ways to make the process fairly painless<pre lang="Javascript"></div>
      <br>
      <div id="divideTranscript" class="button">&nbsp;Transform the
        Transcript!&nbsp; </div>T

I had

JavaScript

function splitString(stringToSplit, separator) {
  var arrayOfStrings = stringToSplit.split(separator);
  
  print('The original string is: "' + stringToSplit + '"');
  print('The separator is: "' + separator + '"');
  print("The array has " + arrayOfStrings.length + " elements: ");

  for (var i=0; i &lt; arrayOfStrings.length; i++)
    print(arrayOfStrings[i] + " / ");
}

var space = " ";
var comma = ",";

splitString(tempestString, space);
splitString(tempestString);
splitString(monthString, comma);
for (var i=0; i < myArray.length; i++)
{
  
}
var yourSpan = document.createElement('span');
yourSpan.innerHTML = "Hello";

var yourDiv = document.getElementById('divId');
yourDiv.appendChild(yourSpan);

yourSpan.onmouseover = function () {
    alert("On MouseOver");
 
}

I also need to add the span elements to the original div, and Add a click handler to the SPAN elements, or to the DIV, which causes the style on the SPAN to change on mouseover

I have been stuck on this for quite some time, and asked on a different website but no answer was enough to help me, I have substantial trouble with coding and stuff that seems simple just leaves me stuck, I could really use some help.

Posted 29-Apr-14 10:59am

Member 10782197

Updated 29-Apr-14 17:56pm

enhzflep

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CognitiveFeedback · Answer 1 · 2014-04-29T18:51:00

try this...

<html>
<body>
    <div id="transcriptText">
        It’s that time of year when you clean out your
        closets, dust off shelves, and spruce up your floors. Once you’ve taken
        care of the dust and dirt, what about some digital cleaning? Going
        through all your files and computers may seem like a daunting task, but
        we found ways to make the process fairly painless<pre lang="Javascript">
    </div>
    <br>
    <div id="divideTranscript" class="button">
         Transform the
        Transcript! 
    </div>
    <script>

        function onmouseOver(event) {
            var element = event.srcElement;

            element.style.background = 'red';
        }

        function onmouseLeave(event) {
            var element = event.srcElement;

            element.style.background = 'none';
        }

        function ondivideTranscript() {
            var element = document.getElementById('transcriptText');
            var transcript = element.textContent;
            var parts = transcript.split(' ');

            var target = document.getElementById('transcriptText');

            target.textContent = '';

            parts.forEach(function (part) {
                var span = document.createElement('span');
                span.textContent = part + ' ';
                target.appendChild(span);

                span.addEventListener('mouseover', onmouseOver);
                span.addEventListener('mouseleave', onmouseLeave);
            })

        }

        document.getElementById('divideTranscript').addEventListener('click', ondivideTranscript);
    </script>
</body>
</html>

You requested to have a mouseover event handler ... but it's easy to cause the style on the SPAN to change on mouseover with css instead...

that would look like this:

<html>
<style>
    span:hover
    {
        background: red;
    }
</style>
<body>
    <div id="transcriptText">
        It’s that time of year when you clean out your
        closets, dust off shelves, and spruce up your floors. Once you’ve taken
        care of the dust and dirt, what about some digital cleaning? Going
        through all your files and computers may seem like a daunting task, but
        we found ways to make the process fairly painless<pre lang="Javascript">
    </div>
    <br>
    <div id="divideTranscript" class="button">
         Transform the
        Transcript! 
    </div>
    <script>
        function ondivideTranscript() {
            var element = document.getElementById('transcriptText');
            var transcript = element.textContent;
            var parts = transcript.split(' ');

            var target = document.getElementById('transcriptText');

            target.textContent = '';

            parts.forEach(function (part) {
                var span = document.createElement('span');
                span.textContent = part + ' ';
                target.appendChild(span);
            })

        }

        document.getElementById('divideTranscript').addEventListener('click', ondivideTranscript);
    </script>
</body>
</html>