html 输入 onchange 不接受匿名函数

Posted

技术标签:

【中文标题】html 输入 onchange 不接受匿名函数【英文标题】:html input onchange doesn't accept anonymous function 【发布时间】:2014-07-27 00:23:27 【问题描述】:

为什么这不起作用?

 <input type="file" id="kmlFiles2" multiple onchange="function()alert('why does this not work')()">

chrome 给我一个错误, Uncaught SyntaxError: Unexpected token (.

Firefox 告诉我 SyntaxError: function statement requires a name

但这确实有效?

 <input type="file" id="kmlFiles2" multiple onchange="alert('but this does work')">

http://jsfiddle.net/ewzyV/

我之所以这么问,是因为我正在尝试使用 MVC 框架来将代码注入到 onchange 事件中。

【问题讨论】:

jsfiddle.net/ewzyV/1 ^ 如果您使用执行的函数,例如 IIFE,它应该可以工作 ^ 但是,那又有什么意义呢? 【参考方案1】:
 בס''ד

使用您的代码段:

    onchange="function()alert('why does this not work')()"

有一个基本问题。我希望https://www.w3schools.com/jsref/event_onchange.asp javascript 的格式是(而不是):

    object.onchange = function()myScript;

使用 onchange 事件,“对象”。已经是隐含的,所以预期的正确使用形式是:

    onchange= "function()alert("Why does this not work?"); return;"

没有“回报”;语句很少给出问题,但 - 即使如此 - 我将其包括在内以使功能完整。

我遇到了类似的情况,正在尝试解决,因此非常感谢您提出这个问题。谢谢你,祝你编程好运!

我从这个参考开始:

https://www.w3schools.com/js/js_function_definition.asp

    After a function expression has been stored in a variable, the 
    variable can be used as a function:
    Example
    var x = function (a, b) return a * b;
    var z = x(4, 3); 

我发现以下代码可以正常工作:

    onchange="alert('Hello 10'); alert('Hello 20'); return; "

似乎“function()”也是隐含的。我对其进行了测试,并发布了两次警报。我从一个警报开始。由于它对我有用,因此您可能希望以此作为提示,希望它“应该”如何对您也有用。

在使用内联函数测试一段时间后,它们似乎不稳定,以使某些东西始终如一地工作。所以我最终得到了下面的代码,它对我很有效,只需定义一个函数来完成需要做的事情:

<td><strong>Number of Posts For the Carousel to Show:</strong></td>
<td style="text-align: center; vertical-align: middle; padding: 10px;" colspan="2">
<input id="<?php echo esc_attr( $this->get_field_id( 'ceupoststoshow' ) ); ?>" style="vertical-align: middle; horizontal-align: middle;" max="20" min="1" step="1" type="range" value="<?php echo esc_attr( $titleooi ); ?>" onchange="updatetwopoststoshowtext(this.value, this.id, 'ceupoststoshow' , 'titleooi','ceupoststoshowtext')" >
<script type="text/javascript">
function updatetwopoststoshowtext(thistextvalue, thisfieldid, thisoldfromid, thisnewtoidone, thisnewtoidtwo) 
updatepoststoshowtext(thistextvalue, thisfieldid, thisoldfromid , thisnewtoidone);
updatepoststoshowtext(thistextvalue, thisfieldid, thisoldfromid , thisnewtoidtwo);

</script>

</td>
<td>
<input style="width: 90%;" type="text" id="<?php echo esc_attr( $this->get_field_id( 'ceupoststoshowtext' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'ceupoststoshowtext') ); ?>" type="text" value="<?php echo esc_attr( $titleooi ); ?>" onchange="updatepoststoshowtext(this.value, this.id, 'ceupoststoshowtext' , 'titleooi')" >

<script type="text/javascript">
function updatepoststoshowtext(thistextvalue, thisfieldid, thisoldfromid, thisnewtoid) 
var strthistextvalue= String(thistextvalue); var strthisfieldid = String(thisfieldid); 
var strthisoldfromid=String(thisoldfromid); var strthisnewtoid = String(thisnewtoid);
alert ("UPST hello there! strthistextvalue = " + strthistextvalue + " strthisfieldid = " + strthisfieldid + " strthisoldfromid = " + strthisoldfromid + " strthisnewtoid = " + strthisnewtoid );

var subfieldidlength = strthisfieldid.length - strthisoldfromid.length;
var substrfieldid = strthisfieldid.substring (0, subfieldidlength);
alert ("UPST hello there two! subfieldidlength = " + subfieldidlength + " substrfieldid = " + substrfieldid);

var newstrfieldid = substrfieldid + strthisnewtoid;
alert ("UPST hello there three one! newstrfieldid = " + newstrfieldid);
var newElementId = document.getElementById(newstrfieldid);  
alert ("UPST hello there three two! newElementId.value = " + newElementId.value);
(document.getElementById(newstrfieldid)).value = strthistextvalue;
alert ("UPST hello there three! (document.getElementById(newstrfieldid)).value = " + strthistextvalue);

alert ("document.getElementById (newstrfieldid = " +  newstrfieldid + " ) . value = thistextvalue = " + thistextvalue);
return;

</script>

【讨论】:

我目前正在测试我在 Firefox 55.0.3 32-bit for 64-bit Windows 10 上发布的内容;如果解决方法有任何问题,我希望尽快提供更新。 我喜欢 Besiyata Deshmaya :)【参考方案2】:

您不能从 html 元素调用匿名函数,因此您可以通过以下事件处理来实现:

<input type="file" id="kmlFiles2" multiple>
 <script>
    document.getElementById("kmlFiles2").addEventListener("change", function()
        alert('This is working')
    )
 </script>

【讨论】:

【参考方案3】:

创建内联函数不是一个好习惯。

我会建议类似的东西

<html>
 <script>
   function myFunction()
     alert('hey it works');
   
 </script>
 <body>
 <input type ='file' id='kmlFiles2' onchange="myFunction();" />
 </body>
 </html>

你也可以考虑写

function init()
   document.getElementById('kmlFiles2').onclick=function()alert('this also works');;

window.onload=init;

【讨论】:

【参考方案4】:
onchange="(function()alert('this should work'))()"

【讨论】:

唯一的问题是这样你不能通过事件...就像我如何通过onchange="(function(e) e.preventDefault(); alert('this should work'); )()" 错误,纳米,这似乎工作onchange="(function(e) e.preventDefault(); alert('this should work'); )(event)" 这是最好的答案!

以上是关于html 输入 onchange 不接受匿名函数的主要内容,如果未能解决你的问题,请参考以下文章

python 之匿名函数

python基础——匿名函数及递归函数

匿名函数

匿名函数

python内置函数and匿名函数

python学习十五天