Assigning a <span class""> to a specific portion of an array of strings

JavaScript
1

I have an array of strings:

var sec = ["10% bonus on your next order! use KEYCODE: TEN", "15% bonus on your next order! use KEYCODE: FIFTEEN", 
"Free Shipping bonus on your next order! use KEYCODE: FREE SHIPPING", "10% bonus on your next order! use KEYCODE: TEN", 
"25% bonus on your next order! use KEYCODE: TWENTY-FIVE", "Free Shipping bonus on your next order! use KEYCODE: FREE SHIPPING"];

I want to wrap a span tag around the KEYCODE: portion of the above array.

My intent is to add css to the span via a class name, I’ve tried various iterations to achieve the desired results, but to no avail, the outputted array doesn’t return with the keycode in a different color.

what am I doing wrong? or is what I am seeking to do simply not possible?

Thanks in advance for the help

I found the solution to this problem.
For anyone searching for the solution Here it was:

var sec = ["10% bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>", "15% bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>", 
"Free Shipping bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>", "10% bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>", 
"25% bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>", "Free Shipping bonus on your next order! use" + "<span class='redBold'> KEYCODE: TEN</span>"];
2

Hi there glenn171,

you may find this alternative example mildly interesting…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
    text-align: center;
 }

#code {
    display: inline-block;
    padding: 1em;
    border: 0.062em solid #999;
    background-color: #fff;
    text-align: left;
 }

.keyCode {
    margin-left: 0.75em;
    font-weight: bold;
    color: #c00; 
 }
</style>

</head>
<body> 
<div id="code"></div>

<script>
(function( d ) {
   'use strict';

   var sec = [
      '10% bonus on your next order! use KEYCODE: TEN', 
      '15% bonus on your next order! use KEYCODE: FIFTEEN',
      'Free Shipping bonus on your next order! use KEYCODE: FREE SHIPPING', 
      '10% bonus on your next order! use KEYCODE: TEN',
      '25% bonus on your next order! use KEYCODE: TWENTY-FIVE', 
      'Free Shipping bonus on your next order! use KEYCODE: FREE SHIPPING'
     ];

   var c, k, s, p;

   for ( c = 0; c <  sec.length; c++ ) {
         k =  sec[c].substring( sec[c].lastIndexOf( 'KEYCODE' ));
         s = d.createElement( 'span' );
         s.setAttribute( 'class', 'keyCode' );
         s.appendChild( d.createTextNode( k ) );
         sec[c] = sec[c].replace( k,'' );
         p = d.createElement( 'p' );
         p.appendChild( d.createTextNode( sec[c] ) );
         p.appendChild( s );
         d.getElementById( 'code' ).appendChild( p );
       }
}( document ));
</script>

</body>
</html>

coothead

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.