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）

Answer 1

onclick中的变量需要被'或"包围，否则将在点击之前对其进行评估，从而导致语法错误。

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

简单示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

2 个答案: