JavaScript未捕获的SyntaxError：意外的令牌非法 [英] JavaScript Uncaught SyntaxError: Unexpected token ILLEGAL

问题描述

我试着在代码下运行，但chrome显示为意外的标记ILLEGAL 。
任何人都可以帮忙吗？

当我点击按钮时，它应该添加标签，当它找到 images / 1h.jpg 它不存在，它应该触发 onerror 事件并运行函数onc（）添加一些CSS并加载另一张图片，但它没有运行函数onc（ ），当我访问控制台时，它显示未捕获的SyntaxError：意外的标记ILLEGAL 。
$ b

< button id ='a'onclick =onc（）;> aaa< / button>< div>< / div>

< pre-class =snippet-code-js lang-js prettyprint-override> function onc（）{var path1 ='images / 1h.jpg'; //不存在var path2 ='images / 1s.jpg'; //存在var tmp =< img sr c ='+ path1 +'onerror ='nofind（this，+ path2 +）;'/> ; $（'div'）。html（tmp）;}

我搜索了一些答案， 或'，但我真的不知道如何解决我的代码。谢谢。

解决方案

在HTML属性文本中， path2 中的字符串不会被引用，它将如下所示：

  onerror ='nofind（this，images / 1s.jpg）;'
  

一个解决方案是将它放在引号中：

  var tmp =< img src =' + path1 +'onerror ='nofind（this，\+ path2 +\）;'/> ; 
 //变化在这里----------------------------------- ^^  - ------- ^^ 
  

...呈现如下：

  onerror ='nofind（this，images / 1s.jpg）;'
  

然而，更好的解决方案不是使用 onXyz 属性，没有理由而是使用现代事件处理：

  function onc（）{
 var path1 ='images / 1h.jpg '; //不存在
 var path2 ='images / 1s.jpg'; //存在
 var img = $（img）on（error，function（）{
 nofind（this，path2）; 
}）。attr（src，path1）; 
 $（'div'）。html（img）; 
} 
  

请注意，我们在错误事件之前设置 src 属性。根据错误原因， error 可能不是必须的，但进入和我是一个好习惯对于相关的 load 事件，t可能会有相当大的影响。 （在设置 src 之后，您可以挂钩 load 事件是一个常见的误解;它最适用于但如果浏览器具有缓存的图像并且缓存设置允许浏览器在不重新验证它的情况下重用它，在这种情况下，浏览器可能会触发 load 只要设置了 src ，并且没有看到任何JavaScript处理程序，就不会让它们排队，以便在JavaScript线程下次可以运行处理程序时运行。 [只有一个主要的JavaScript UI线程，但浏览器是多线程的。]）

I tried to run below code but chrome showed Unexpected token ILLEGAL . Can anyone help ?

When I click the button, it should add the tag, and when it find images/1h.jpg it does not exist ,it should trigger onerrorevent and run function onc() to add some CSS and load another picture, but it didnt run function onc() and when I access console ,it shows Uncaught SyntaxError: Unexpected token ILLEGAL .

<button id='a' onclick="onc();">aaa</button>
<div></div>

function onc(){
	var path1= 'images/1h.jpg';//Does not exist
	var path2= 'images/1s.jpg';//exist
	var tmp = "<img src='"+path1+"' onerror='nofind(this,"+path2+");' /> ";
	$('div').html(tmp);
}

I searched some answers, it seems caused by "" or '', but I really don't know how to fix my code. Thanks.

解决方案

In the rendered JavaScript in the HTML attribute text, the string you have in path2 won't be in quotes, it'll look like this:

onerror='nofind(this,images/1s.jpg);'

One solution is to put it in quotes:

var tmp = "<img src='"+path1+"' onerror='nofind(this,\""+path2+"\");' /> ";
// Change is here -----------------------------------^^---------^^

...which renders like this:

onerror='nofind(this,"images/1s.jpg");'

A better solution, though, would be not to use an onXyz attribute at all. There's no reason to. Instead, use modern event handling:

function onc(){
    var path1= 'images/1h.jpg';//Does not exist
    var path2= 'images/1s.jpg';//exist
    var img = $("img").on("error", function() {
                  nofind(this, path2);
              }).attr("src", path1);
    $('div').html(img);
}

Note that we hook the error event before setting the src attribute. This may not be strictly necessary with error depending on the reason for the error, but it's a good habit to get into and it can matter quite a lot for the related load event. (It's a common misconception that you can hook the load event after setting src; it works most of the time, but may not if the browser has the image cached and the cache settings for it allow the browser to reuse it without revalidating it, in which case the browser may fire the load event as soon as src is set and, not seeing any JavaScript handlers, doesn't queue them to run when the JavaScript thread is next free to run handlers. [There is only one main JavaScript UI thread, but browsers are multi-threaded.])

这篇关于JavaScript未捕获的SyntaxError：意外的令牌非法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！