Search code examples
javascripthtmlgreasemonkeyuserscriptstwitch

Greasemonkey: Unable to move div classes

I've been trying to use a personal grease/tampermonkey script for use on twitch.tv

Currently I'm trying to move stats and stream-config-status to be above the dash-hostmode-contain. I found this post and tried re-working it to fit what I want. This is what I had setup http://jsfiddle.net/7L2s180s/3/ But I am pretty inexperienced so I failed. 

<div class="grid c7" id="controls_column">
    <div class="dash-broadcast-control">title broadcast</div>
    <div class="dash-hostmode-contain"> you are not being hosted</div>
    <div class="dash-hosting-contain" style="display: none;"></div>
    <div class="dash-player-contain js-dash-player-contain">----</div>
    <div id="stats"> x people are watching</div>
    <div id="stream-config-status">good quality</div>
</div>

My end goal would be this, I just haven't figured out to get those two to move yet. 

<div class="grid c7" id="controls_column">
    <div class="dash-broadcast-control">title broadcast</div>
    <div id="stats"> x people are watching</div>
    <div id="stream-config-status">good quality</div>
    <div class="dash-hostmode-contain"> you are not being hosted</div>
    <div class="dash-hosting-contain" style="display: none;"></div>
    <div class="dash-player-contain js-dash-player-contain">----</div>
</div>

Solution

  • You have two issues in your code:

    1. When using querySelector(), you need to add the # prefix to all strings that represent ids and the . prefix to all strings that represent class names.
    2. You had a typo in #stream-config-status.

    Have a look at this updated version of your JSFiddle:

    http://jsfiddle.net/7L2s180s/5/

    As a general tip, in the future you can use the developer console of all major browsers to debug an error like this. Simply press F12 to open it. It will show you most error messages.