时间戳

首页 > 解决方案 > 使用 javascript 更改包含图像的按钮文本 - 使用转义单引号

javascript - 使用 javascript 更改包含图像的按钮文本 - 使用转义单引号

问题描述

我有一个带有以下 HTML 代码的按钮，它在首次运行时可以正常工作：

<button type='button' class='btn-success chbtn' id ='basketbutton'>Click to see basket <img class='btnbasket' src='images/cart.png' alt='Cart'/> ".$basketnumber." items</button>

$basketnumber 来自一个 XMLHttpRequest 请求，其中包含数据库中的当前购物篮总数。

如果给我一个我想要的按钮，并带有一条消息“单击以查看购物篮”，并带有购物车和“X 商品”的图像。

在将商品添加到购物车、更新数据库等之后，我正在更新网页元素以包含新购买。

该网页是使用 php 构建的，并在标题的脚本标签中插入一个 js 函数以更新元素并具有以下行（在 php 中）：

document.getElementById('basketbutton').innerHTML=  'Click to see basket <img class='btnbasket' src='images/White shopping cart.png' alt='Cart'/>   ' +obj.baskettotal+ ' items';

obj.baskettotal 来自 XMLHttpRequest 请求，当前购物篮总数来自数据库

这不起作用。控制台告诉我“未捕获的 ReferenceError：[js 函数] 未在 HTMLButtonElement.onclick 中定义”

当我删除图像参考时：

document.getElementById('basketbutton').innerHTML=  'Click to see basket ' +obj.baskettotal+ ' items';

一切都很好。

我认为这是我使用单引号和包含它们的 img 引用的方式，这使事情变得混乱。定义文本的双引号不存在，我需要在 php 中定义它们，以便正确构建脚本。

我曾尝试 &#34;在 php 代码中使用 HTML 代码，但这没有任何作用，也没有作为双引号出现（它仍然&#34;在 jS 函数中的 HTML 页面上）并且错误仍然发生。

我试过使用.innertext但.textcontent无济于事

我希望有人能在正确的方向上帮助我

标签： javascriptjqueryimagebutton

解决方案

正如@ADyson 所建议的那样，转义正确的单引号对我有用:)

document.getElementById('basketbutton').innerHTML=  'Click to see basket <img class=\'btnbasket\' src=\'images/White shopping cart.png\' alt=\'Cart\'/> ' +obj.baskettotal+ ' items';

非常感谢您的指点。我首先犯了一个错误，即在 XMLHttpRequest 请求响应（obj.baskettotal）周围转义引号，这应该作为文本而不是值！

推荐阅读