How do I correctly use the span element

Question

1.00/5 (1 vote)

See more:

I have to take the phrase

"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."

and
Divide the text into an array of words.
Iterate over that array, at each step:
Build SPAN elements as you go, along with the attributes as shown in the example
Add the SPAN elements to the original DIV
Add a click handler to the SPAN elements, or to the DIV, which causes the style on the SPAN to change on mouseover.

Im not necessarily asking someone to do it for me, I just need a point in the right direction as to where I should start

Posted 28-Apr-14 19:59pm

Member 10782197

Updated 28-Apr-14 21:38pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Add a Solution

2 solutions

Solution 2

I'd suggest you start by dividing the text into an array of words. The String.split function should help you out there: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split[^]

Posted 28-Apr-14 21:39pm

Graham Breach

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-04-28T21:37:00

Solution 1

Divide the text into an array of words.

Use JavaScript String split() Method[^]

Iterate over that array, at each step:

Use For Loop.

JavaScript

for (var i=0; i < myArray.length; i++)
{
    // Do something.
}

Build SPAN elements as you go, along with the attributes as shown in the example.

JavaScript
```
var yourSpan = document.createElement('span');
yourSpan.innerHTML = "Hello";
```

Add the SPAN elements to the original DIV

JavaScript

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

Add a click handler to the SPAN elements, or to the DIV, which causes the style on the SPAN to change on mouseover.

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

    // Do anything you want.
}
```

Posted 28-Apr-14 21:37pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v2

Comments

Member 10782197 29-Apr-14 12:01pm

is there a way to build span elements without using innerHTML

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 29-Apr-14 13:42pm

So, how would you assign the text? What is the problem with innerHTML?

Member 10782197 29-Apr-14 14:49pm

Actually nevermind that should be fine, but how do I use the split string function to split that whole phrase into an array

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 29-Apr-14 15:33pm

var str = "How are you doing today?";
var res = str.split(" ");

Please accept the answer, if it helped you. :)

Member 10782197 29-Apr-14 15:44pm

so under
var str =" "
I would put the entire phrase?
and under str.split(" ") just putting a space will separate the words?

and I accepted it thank u

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 29-Apr-14 23:11pm

Yeah, you are correct.

Thanks,
Tadit.