include multiple javascript code using php

Question

I want to include this code multiple times in the same page using php (include).
html code:

<div class="red" onclick="red()">red</div>
<div class="green" onclick="green()">green</div>
<div class="blue" onclick="blue()">blue</div>
<div id="change">click on the colors to change the div color</div>

css code:

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
#change{background-color: yellow;width: 100px;}

javascript code:

function red()
{
document.getElementById('change').style.background="red";
}
function green()
{
document.getElementById('change').style.background="green";
}
function blue()
{
document.getElementById('change').style.background="blue";
}

This code works fine in the first div (id=change) but in the second div when I click on the div with class=red it changes the first div instead of the second.
How can I make it change the div that is below it?
problem solved:
http://jsfiddle.net/wjp4pqw6/1/

You can't have multiple elements with the same id attribute defined. The results are undefined as to what the browser should do in that situation, but as you are seeing, it typically uses the first one it finds in the HTML document. — Marc Baumbach
– Marc Baumbach, Commented Aug 24, 2014 at 9:24
what is the purpose of these codes ? you can assign a div id to a single div. otherwise how can JS determine which div it change the color ? — Athul AK
– Athul AK, Commented Aug 24, 2014 at 9:28
@MarcBaumbach How can I make it use the nearest div to it? I have tried getElmentByTagName('div')[3] but it still use the div with index of (3). — user3926604
– user3926604, Commented Aug 24, 2014 at 9:31
@AthulAK I want to use a code similar to this in a forum to allow the user to include it multiple times in a post. — user3926604
– user3926604, Commented Aug 24, 2014 at 9:33
There are a lot of ways to accomplish this, one is to provide a unique ID and pass it into the functions you are calling (See this JSFiddle). I would normally recommend something that is more unobtrusive though. — Marc Baumbach
– Marc Baumbach, Commented Aug 24, 2014 at 9:39

Bluedayz · Accepted Answer · 2014-08-24 09:48:07Z

I have written some code that should do it for you:

PHP

for($i=0; $i<10; $i++) {
    echo '<div id="containter_'.$i.'">';
    echo '<div class="red" onclick="color(\'red\', this);" id="red_'.$i.'">red</div>';
    echo '<div class="green" id="green_'.$i.'" onclick="color(\'green\', this)">green</div>';
    echo '<div class="blue" id="blue_'.$i.'" onclick="color(\'blue\', this)">blue</div>';
    echo '<div class="change" id="change_'.$i.'"></div>';
    echo '</div>';
}

That echo's 10 blocks of your code.

Javascript

function color(c, elem) {
    id = elem.id.replace(c,'');
    document.getElementById('change'+id).style.background=c;
}

CSS

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

Hope this helps.

Athul AK · Accepted Answer · 2014-08-24 10:13:43Z

0

Try this,

HTML

<div>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
    <div class="change">click on the colors to change the div color</div>
</div>
<div>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="blue">blue</div>
    <div class="change">click on the colors to change the div color</div>
</div>

CSS

.red{background-color: red;width: 50px;}
.green{background-color: green;width: 50px;}
.blue{background-color: blue;width: 50px;}
.change{background-color: yellow;width: 100px;}

JS

$(function() {
    var colors = ["red", "green", "blue"];
    $.each(colors, function() {
        var color = this;
        $("." + color).click(function() {
            $(this).siblings(".change").css("background", color)
        });
    });
});

answered Aug 24, 2014 at 10:13

Athul AK

3684 silver badges15 bronze badges

2 Comments

hex494D49 Over a year ago

What's the point of copy pasting the code given in the comments above by @MarcBaumbach?

Athul AK Over a year ago

it'll help other users to use the answer. users never look for comments, but answers.

Collectives™ on Stack Overflow

include multiple javascript code using php

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related