Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Trying to pass a styled phrase through "innerHTML"

thesoundsmith

Active Coder
I have a "radio" on my WordPress site to play mp3s. You can see it in action here: The DashRadio page
When you select a different radoi "channel," like Blues or Jazz, the text changes. The words are correct but the sytle does not carry through. I want the phrase "DashRadio" to be styled as follows:
CSS:
*.prad{font-style:italic;font-weight:bold; font-family: Georgia,'Times New Roman',
        Times,serif;color:#6A3ED0}
It is sometimes invoked in this call:

Code:
<script>
    function nuStyle(myStyle) {
            var theStyle = myStyle;
            var curStyle = document.getElementById("radio");
            var nuScript = curStyle.getElementsByTagName("script");

            switch (theStyle) {
                    case 'easy':
                            {
                                    document.getElementById("mStyl").innerHTML = "<b><i>DashRadio</i>: Over Easy</b><br><br>All the mellow, relaxing music from The Soundsmith in one place!";
                                    document.getElementById("hdln").innerHTML = "<b><i>DashRadio</i>: Over Easy</b>";
                                    jwplayer('radio').load("https://www.davidkempton.com/xml/radeasy.xml");
                            }
                            break;
                    case 'jazz':
                            {
                                    document.getElementById("mStyl").innerHTML = "<b><i>DashRadio</i>: The Jazz Joint</b><br><br>All of the best jazz from The Soundsmith in one place!";
                                    document.getElementById("hdln").innerHTML = "<b><i>DashRadio</i>: The Jazz Joint</b>";
                                    jwplayer('radio').load("https://www.davidkempton.com/xml/radjz.xml");
                            };
                            break;
                    default:
                            {
                                    document.getElementById("mStyl").innerHTML = "<b><i>DashRadio</i>: Hear It All!</b><br><br>All the great music from The Soundsmith in one place!";
                                    document.getElementById("hdln").innerHTML = "<b><i>DashRadio</i>: Hear It All!</b>";
                                    jwplayer('radio').load("https://www.davidkempton.com/xml/radioall.xml");
                            }
                            break;
                    };

                };
</script>
This will pass the Bold and Italics, but not the Span or the font treatment. And w3c does not like the '/' in the text. How can I get the styled text through?
Forgot to add- it's used here:

HTML:
        <body  onload="createPlayer()">
                <!-- wrap starts here -->
                <div id="wrap">
                        <!--header -->
                        <div id="header" title="">
                        </div>
                        <!-- content-wrap starts -->
                        <div id="content-wrap">
                                <div id="main">
                                        <h2 id="hdln"><span class="prad">DashRadio</span>: <b>Hear It All!</b></h2>
                                        <div id="mymov">
                                        </div></div></div></div>
</body>
Thanks
 
Last edited:
Solution
When you change the text, the span element with the prad class is replaced. The new text does not have the prad class, and so the style does not get applied to it.
What you probably want to do is add the class name to the <i> elements:
JavaScript:
document.getElementById("hdln").innerHTML = "<b><i class='prad'>DashRadio</i>: Over Easy</b>";
When you change the text, the span element with the prad class is replaced. The new text does not have the prad class, and so the style does not get applied to it.
What you probably want to do is add the class name to the <i> elements:
JavaScript:
document.getElementById("hdln").innerHTML = "<b><i class='prad'>DashRadio</i>: Over Easy</b>";
 
Solution
When you change the text, the span element with the prad class is replaced. The new text does not have the prad class, and so the style does not get applied to it.
What you probably want to do is add the class name to the <i> elements:
JavaScript:
document.getElementById("hdln").innerHTML = "<b><i class='prad'>DashRadio</i>: Over Easy</b>";
I honestly did not expect that to work, but it did! w3c still doesn't like the backslashes, but passes them, so it works, thank you so much.
 
I honestly did not expect that to work, but it did! w3c still doesn't like the backslashes, but passes them, so it works, thank you so much.
Great that it works. For styling issues, @Johna is your man.

Now I'm intrigued to know what exactly you mean with this : w3c still doesn't like the backslashes, but passes them. I don't even see any backslashes...
 
Code:
document.getElementById("hdln").innerHTML = "<b><i class='prad'>DashRadio</i>: The Jazz Joint</b>";
the closing bold and italic tags. It complains about the / in </i. and </i>. (At least in my most recent build of WeBuilder 2018, my coding tool. I can't find a dedicated w3c WordPress validator, but the code checking seems accurate.
 
Code:
document.getElementById("hdln").innerHTML = "<b><i class='prad'>DashRadio</i>: The Jazz Joint</b>";
the closing bold and italic tags. It complains about the / in </i. and </i>. (At least in my most recent build of WeBuilder 2018, my coding tool. I can't find a dedicated w3c WordPress validator, but the code checking seems accurate.
Oh, those. They're not backslashes 😉
Not sure who is complaining about that, and why, but do ignore it. That code is 100% correct.
 

Buy us a coffee!

Back
Top Bottom