Javascript how to make function work on other function

Question

I've just started learn JavaScript and wanted to try something.
How can I make JavaScript function work on other function? Like, I want when you click on a div, other div will have background-color:yellow; (or x.style.backgroundColor="yellow"; in JS), like this:

<div onclick="yellow">Click me to paint the other div in yellow</div>
<div id="painted">I should be painted yellow if you click the above div!</div>

In C-language I know it can be possible if you call recursion so I tried use it though I don't know.
Of course it didn't succeed but there's a jsbin if you want to look.

Q: How can I paint a div in yellow background with other div function using JavaScript?
Thanks in advance.

Answer 1

You will have to attach the function with parenthesis like fillYellow() ,

<div onclick="fillYellow()">Click me to paint the other div in yellow</div>
<div id="painted">I should be painted yellow if you click the above div!</div>

<script>
function fillYellow(){
    document.getElementById('painted').style.background = "yellow";
}
</script>

Inside this function get the painted div by it's id and apply background color for this div.

Answer 2

You should have document.getElementById("backgroundChange"); instead of getElementById("backgroundChange"); and it will work :)

Answer 3

As your question was "How can I make JavaScript function work on other function?" I started to think maybe you're really talking about doing something event-driven.

Therefore, why not consider this (slightly more advanced) solution

1. When you click a <div> , you fire a custom "paint" event at every <div> .
   • The event fired at itself is different to at other <div> s.
2. When a <div> node sees a "paint" event e , it applies e.style to node.style

The code would look like this

function paintEvent(style) { // function make a custom event
    var ev = new Event('paint');
    ev.style = style;
    return ev;
}

function applyPaint(node, style) { // function to style a node
    var key;
    for (key in style) { // loop over object
        node.style[key] = style[key];
    }
}

function paintHandler(e) { // function to fire when you see a "paint" event
    applyPaint(this, e.style);
}

function clickHandler(e) { // function to fire when you see a "click" event
    var divs = document.getElementsByTagName('div'),
        i,
        paint = paintEvent({'background-color': 'yellow'});
    this.dispatchEvent(paintEvent({'background-color': 'red'}));
    for (i = 0; i < divs.length; ++i) { // loop over array-like
        if (divs[i] !== this)
            divs[i].dispatchEvent(paint);
    }
}

window.addEventListener('load', function () { // when the Window has loaded
    var divs = document.getElementsByTagName('div'),
        i;
    for (i = 0; i < divs.length; ++i) { // loop over array-like
        divs[i].addEventListener('click', clickHandler); // attach the handlers
        divs[i].addEventListener('paint', paintHandler);
    }
});

DEMO

Answer 4

Your yellow event handler should look up the div with the id "painted" and then add a class to it which will give it yellow text.

This is one way ( a simple one) but where are a number of other similar ways to accomplish this.