cant grab my id's from html with javascript to give them styles

Question

I am doing color palettes and it needs to have a predefined palette and then choose the colors from it the thing is it must be mutable and for this I have come with this solution

            <div class='colorScope'>
                <div id="colorBackgroundDark<%=project.id%>">
                    <div id="Dark1<%=project.id%>">
                    </div>
                    <div id="Dark2<%=project.id%>">
                    </div>
                </div>
                <div id="colorBackgroundLight<%=project.id%>">
                    <div id="Light1<%=project.id%>">
                    </div>
                    <div id="Light2<%=project.id%>">
                    </div>
                </div>
            </div>

Project Id is given by rails, when a project with palettes is created (this is the html for the idea)

And here is the Js that should make the mutable palettes and is not working for some reason I am not able to figure out, I really hope you guys can please help me, please take in account again I am a rookie and be kind with me :x

function colorPalettes(id){
    var myElement = document.getElementById('colorBackgroundDark'+id);
    myElement.style.backgroundColor = "#D93600";
    myElement.style.width = "50%";
    myElement.style.height = "256px";

    var myElement3 = document.getElementById('Dark1'+id);
    myElement3.style.backgroundColor = "#D93600";
    myElement3.style.width = "50%";
    myElement3.style.height = "256px";

    var myElement4 = document.getElementById('Dark2'+id);
    myElement4.style.backgroundColor = "#D93600";
    myElement4.style.width = "50%";
    myElement4.style.height = "256px";

    var myElement2 = document.getElementById('colorBackgroundLight'+id);
    myElement2.style.backgroundColor = "#ffffff";
    myElement2.style.width = "50%";
    myElement2.style.height = "256px";

    var myElement5 = document.getElementById('Light1'+id);
    myElement5.style.backgroundColor = "#00474E";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";


    var myElement6 = document.getElementById('Light2'+id);
    myElement6.style.backgroundColor = "#6CEEFC";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";
}


$( document ).ready(function() {
    var id = $('[type="range"]').attr('id')
    colorPalettes(id);
});

http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Arpit Goyal, Jul 26 '16 at 12:36

Pete · Accepted Answer · 2016-07-26T13:06:32.923

I would agree with j-dexx's css comment but if you are going to go with your javascript, assuming the element has the correct id, I would change your document ready to:

$('[type="range"]').each(function() {
    colorPalettes(this.id);
});

Also check if this $('[type="range"]') returns anything as your html in your question doesn't include any inputs

But as I say - your requirements are it needs to have a predefined palette - this is perfect for using a class to apply that predefined pallete

Below is your code working - I have change some heights and colours so you don't get overlapping divs or divs of the same colour hiding each other

function colorPalettes(id) {
  var myElement = document.getElementById('colorBackgroundDark' + id);
  myElement.style.backgroundColor = "#D93600";
  myElement.style.width = "100%";
  myElement.style.height = "532px";

  var myElement3 = document.getElementById('Dark1' + id);
  myElement3.style.backgroundColor = "#ff0000";
  myElement3.style.width = "50%";
  myElement3.style.height = "256px";

  var myElement4 = document.getElementById('Dark2' + id);
  myElement4.style.backgroundColor = "#ee3333";
  myElement4.style.width = "50%";
  myElement4.style.height = "256px";

  var myElement2 = document.getElementById('colorBackgroundLight' + id);
  myElement2.style.backgroundColor = "#ffffff";
  myElement2.style.width = "100%";
  myElement2.style.height = "532px";

  var myElement5 = document.getElementById('Light1' + id);
  myElement5.style.backgroundColor = "#00474E";
  myElement5.style.width = "50%";
  myElement5.style.height = "256px";


  var myElement6 = document.getElementById('Light2' + id);
  myElement6.style.backgroundColor = "#6CEEFC";
  myElement6.style.width = "50%";
  myElement6.style.height = "256px";
}
$(document).ready(function() {
  $('[type="range"]').each(function() {
    colorPalettes(this.id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorScope">
  <div id="colorBackgroundDarktest1">
    <div id="Dark1test1"></div>
    <div id="Dark2test1"></div>
  </div>
  <div id="colorBackgroundLighttest1">
    <div id="Light1test1"></div>
    <div id="Light2test1"></div>
  </div>
</div>

<input id="test1" type="range" min="0" max="20" step="5">

I would have done it like you guys have suggested but , with classes it would change the palettes of my other projects, projects have one palette each, and they are manipulated by a ranger slider later — Marcos Collado, Jul 26 '16 at 12:47
But in your code, you are applying the same style to the first 3 elements, rather than that bloated js code, it would be easier to create a class with those styles and the use the js to add that class to element. All that function does is add the same styles to multiple elements each time it is called — Pete, Jul 26 '16 at 12:52
they are a placeholder for now, in the future I am going to update this parameters, for the software is a color picker for me (I am a colorblind person) — Marcos Collado, Jul 26 '16 at 12:54
If you guys wonder this fixed my problem $( document ).ready(function() { $('[type="range"]').each(function(){ colorPalettes(this.id); }) — Marcos Collado, Jul 26 '16 at 13:08

score 0 · Answer 2 · answered Jul 26 '16 at 13:09

0

guys this fixed my problem, thank you ver much for your help if anyone has a similar problem, you may use this.

$( document ).ready(function() {
    $('[type="range"]').each(function(){
        colorPalettes(this.id);
    })

answered Jul 26 '16 at 13:09

Marcos Collado

41
1
16

1

oh im sorry, Im new to this, ill go do what you just said – Marcos Collado Jul 26 '16 at 13:37

cant grab my id's from html with javascript to give them styles

2 Answers2