javascript - 使用 .innerHTML 向 JS 函数发送参数

Question

我正在尝试运行两个不同的函数来完成两件不同的事情。两者都需要在单击 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

Answer 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);

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