在我的示例HTML代码中,我得到了一些带有默认函数的按钮,用于更改onclick事件的文本和样式:
<button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <script> function changeText(id) { id.innerHTML = "Ouch!"; id.style.color="red"; id.onclick= again(this); } function again(id) { id.innerHTML = "Again!"; id.style.color=#FF0000; } </script>我正在尝试在默认函数结束时更改onclick事件:
id.onclick= again(this);但它不起作用;
这是jsfiddle链接
我已经尝试过这个问题的解决方案
这个:
id.onclick = function(this) { id.innerHTML = "Again!"; id.style.color=#FF0000; }和这个:
id.setAttribute( "onclick", "javascript: again(this);" );但它们都不起作用。
请注意,我需要this作为发送到函数的参数。
我需要一个javascript解决方案而不是JQuery
我究竟做错了什么?
In my sample HTML code i got some buttons with a default function to change the text and style on onclick event:
<button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <script> function changeText(id) { id.innerHTML = "Ouch!"; id.style.color="red"; id.onclick= again(this); } function again(id) { id.innerHTML = "Again!"; id.style.color=#FF0000; } </script>I'm trying to change the onclick event at the end of the default function:
id.onclick= again(this);But it doesn't work;
This is the jsfiddle link
I've tried solutions in this question and this one
this:
id.onclick = function(this) { id.innerHTML = "Again!"; id.style.color=#FF0000; }and this:
id.setAttribute( "onclick", "javascript: again(this);" );but none of them works.
notice that I need this as the parameter to send into the function.
And I need a javascript solution not JQuery
What am I doing wrong?
最满意答案
您的代码有一些语法错误, id.style.color=#FF0000; ,十六进制值应该是一个字符串。 id.style.color="#FF0000";
在这一行:
id.onclick = again(this);您正在调用again函数并将返回值分配给id.onclick 。 如果要分配函数, id.onclick = again使用id.onclick = again
这是您的代码工作,稍作修改。
function changeText(element) { element.innerHTML = "Ouch!"; element.style.color="red"; element.onclick = again; //Assign "again" function. } function again() { //this is the clicked element. this.innerHTML = "Again!"; this.style.color="#FF0000"; }button { font-size:20px; color:#0C6C89; }<!DOCTYPE html> <body> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> </body>Your code had some syntax errors, id.style.color=#FF0000;, the hex value should be a string. id.style.color="#FF0000";
And in this line:
id.onclick = again(this);You're calling the again function & assigning the return value to id.onclick. If you want to assign a function just use id.onclick = again
Here's your code working, with some minor modifications.
function changeText(element) { element.innerHTML = "Ouch!"; element.style.color="red"; element.onclick = again; //Assign "again" function. } function again() { //this is the clicked element. this.innerHTML = "Again!"; this.style.color="#FF0000"; }button { font-size:20px; color:#0C6C89; }<!DOCTYPE html> <body> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> <button onclick="changeText(this)">Hit Me!</button><br> </body>
更多推荐
发布评论