.innerHTMLを使用してJS関数にパラメータを送信する

Question

2つの異なる機能を実行しようとしています。 divをクリックすると両方とも実行する必要があります。 divはJavaScriptのinnerHTML関数で生成されます。

これは2番目に実行される方法です。 1つのパラメータをとり、ページに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>'; 
} 

私はエラーを取得しています：onclick内部

Uncaught SyntaxError: missing) after argument list

Answer 1

変数はそうでない場合、'または"に囲まする必要がありますクリックの前に評価され、構文エラーが発生します。言われて、インラインではJavaScriptを使用しないことを

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>

。代わりに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>

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