[英]Javascript how to make function work on other function
I've just started learn JavaScript and wanted to try something. 我刚刚开始学习JavaScript,并想尝试一些东西。
How can I make JavaScript function work on other function? 如何使JavaScript函数在其他函数上起作用? Like, I want when you click on a div, other div will have
background-color:yellow;
就像,我想当您单击一个div时,其他div的
background-color:yellow;
(or x.style.backgroundColor="yellow";
in JS), like this: (或JS中的
x.style.backgroundColor="yellow";
),如下所示:
<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. 在C语言中,我知道您可以调用递归,所以尽管我不知道,但我还是尝试使用它。
Of course it didn't succeed but there's a jsbin if you want to look. 当然它没有成功,但是如果您想看的话,可以使用jsbin 。
Q: How can I paint a div in yellow background with other div function using JavaScript? 问:如何使用JavaScript与其他div函数一起在黄色背景上绘制div?
Thanks in advance. 提前致谢。
You will have to attach the function with parenthesis like fillYellow()
, 您必须将函数附加在圆括号内,例如
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. 在此函数内部,通过其ID获取
painted
div,并为此div应用背景颜色。
You should have document.getElementById("backgroundChange");
您应该具有
document.getElementById("backgroundChange");
instead of getElementById("backgroundChange");
而不是
getElementById("backgroundChange");
and it will work :) 它会工作:)
As your question was "How can I make JavaScript function work on other function?" 您的问题是“如何使JavaScript函数在其他函数上起作用?” I started to think maybe you're really talking about doing something event-driven.
我开始认为也许您真的在谈论做事件驱动的事情。
Therefore, why not consider this (slightly more advanced) solution 因此,为什么不考虑这个(稍微更高级)的解决方案
<div>
, you fire a custom "paint" event at every <div>
. <div>
,将在每个<div>
处触发一个自定义的“绘画”事件。
<div>
s. <div>
的事件不同。 <div>
node
sees a "paint" event e
, it applies e.style
to node.style
<div>
node
看到“ paint”事件e
,它将e.style
应用于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);
}
});
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. 您的黄色事件处理程序应查找ID为“ painted”的div,然后向其添加一个类,该类将为其显示黄色文本。
This is one way ( a simple one) but where are a number of other similar ways to accomplish this. 这是一种方法(一种简单的方法),但是还有许多其他类似的方法可以实现此目的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.