使用 .innerHTML 向 JS 函数发送参数答案

【问题标题】：Sending a parameter to JS function using .innerHTML使用 .innerHTML 向 JS 函数发送参数
【发布时间】：2017-09-23 08:42:48
【问题描述】：

我正在尝试运行两个不同的功能，它们做两个不同的事情。两者都需要在单击 div 时运行。 div 是在 JavaScript 的 innerHTML 函数中生成的。

这是第二个运行的方法。它接受一个参数，然后在页面上生成一个div。

//Display larger image:
function furtherDetails(mainImage){
    var moreInfo = document.getElementById('divpropertyInfo');
    moreInfo.innerHTML = '<div id="propInfoDisplay">' +
                            '<img id="image" src="'+mainImage+'" alt="Main Image" />' +
                        '</div>';
}

这是运行该函数的代码：

//Create the property div:
function createPropertyDiv(mainImage, bedrooms, bathrooms, parkings, price, address, latitude, longitude){

    var propertyDiv = document.getElementById('divsearchResults');
    propertyDiv.innerHTML += '<div id="divResults" onclick="showMap('+latitude+','+longitude+');furtherDetails('+mainImage+');">' +
                                '<img id="mainImage" src="' + mainImage +'" alt="Main Image" />' +
                                '<p id="numBedrooms">'+ bedrooms +'</p>' +
                                '<img id="bedroomsImage" src="/images/bedrooms.png" />' +
                                '<p id="numBathrooms">'+ bathrooms +'</p>' +
                                '<img id="bathroomsImage" src="/images/bathrooms.png" />' +
                                '<p id="numParking">'+ parkings +'</p>' +
                                '<img id="parkingImage" src="/images/carspots.png" />' +
                                '<p id="Price">'+ price +'</p>' +
                                '<p id="addressHeading">Address: </p>' +
                                '<p id="Address">' + address + '</p>' +
                            '</div>';
}

我收到错误：

Uncaught SyntaxError: missing ) after argument list

【问题讨论】：

什么时候出现这个错误？你点击那个的时间？
@Christopher 我认为错误不是来自这两个函数，您能否分享一个显示错误的工作 sn-p，如果可能的话，是一个 JSFiddle？
检查(和)对的函数
@Farsay 是的，只有当我点击它时。
@Naren 错误出现在这些函数之一中。当我不解析任何参数时，furtherDetails() 函数运行。

标签： javascript html parameters

【解决方案1】：

onclick里面的变量需要用'或者"包围，否则会在点击前被求值，导致你的语法错误。

onclick="showMap(\''+latitude+'\',\''+longitude+'\');furtherDetails(\''+mainImage+'\')

简单示例

let el = document.getElementById('foo');
let f = "bar";

function bar(c) {
  console.log(c);
}

el.innerHTML += '<div onclick="bar(\'' + f + '\')">Baz</div>'; // logs the value of f
el.innerHTML += '<div onclick="bar(' + f + ')">Boo</div>'; // logs the function bar

<div id="foo">
Foo
</div>

话虽如此，请不要使用内联 javascript。请改用 eventListener。然后，您可以将任何您想要的函数传递给函数，而不必担心转义，并且您可以从侦听器调用任意数量的函数。

function foo(bar) {
  console.log(bar);
}
let bar = 'bar';

let el = document.createElement('div');
el.id = 'resultDiv';
el.appendChild(document.createTextNode('child'));

el.addEventListener('click', function() {
  foo(bar);
}, false);

document.getElementById('foo').appendChild(el);

&lt;div id="foo"&gt;Foo&lt;/div&gt;

【讨论】：

【解决方案2】：

我认为问题出在这里

根据您的代码 html 将是这样的 -

<div id="divResults" onclick="showMap(1,3);furtherDetails(images/123.jpg);">

您必须使用 \" 转义字符串，并且您的 html 应该是这样的 -

<div id="divResults" onclick="showMap(1,3); furtherDetails('images/123.jpg');">

【讨论】：