在Javascript中将变量放入onclick中

时间:2016-09-20 22:16:38

标签: javascript

见下面的代码,

marker = new MarkerWithLabel({
            map: resultsMap,
            position: latlng,
            title: "Address",
            //  radius: int_radius ,
            draggable: false,
            labelAnchor: new google.maps.Point(10, 35),
            labelContent: label,
            labelClass: "labels",
            labelInBackground: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            icon: image,
            customInfo: "<span><strong>"+storename[x]+"</strong></span><br><br><p><strong>Address</strong></p>"+address[x]+
            ',<br>'+city[x]+', '+state[x]+' '+zipcode_true[x]+"<p><strong>Phone</strong></p>"+phone[x]+"<button onclick='redirect();' class='btn btn-brown'>Print Coupon</button>"
    });  
details
                    (    x,
                         address,
                         storename,
                         phone,
                         marker,
                         resultsMap,
                         zipcode_true,
                         city, state,
                        (distance.status == 'NOT_FOUND' ? '' : distance.distance.text));

另一个功能,

function details(x, address, storename, phone,marker, resultsMap, zipcode_true, city, state, distance){
// more code
    var dynamic_address = "<li data-index="+new_id+" id='"+new_id+"'  address-wrapper'>"+
                              "<div id='"+emailLinkId+"' class='address-blk'><span class='number'>"+ (x+1) +
                              "</span><span class='marker-name'><a class='store-title' href='#' onclick='openInfoWindow("+resultsMap+");' style='text-decoration: none;'>"+storename[x]+
                              "</a><span>"+distance+"</span></span>";
// more code
}

我需要使用onclick事件调用带参数的函数。

onclick='openInfoWindow("+resultsMap+");'

控制台说,“未捕获的SyntaxError:意外的标识符”。如何在这种情况下传递变量?

2 个答案:

答案 0 :(得分:0)

不要在线构建所有这些字符串。我可以告诉你代码中的bug是什么,但真正的问题不是bug本身。问题是,如果没有合适的工具,做这些东西是一个巨大的痛苦,你将永远遇到意想不到的和病态的错误,甚至可能不会立即,可能在生产线下6周。

这里的游戏名称将语法错误与语义错误和逻辑错误分开。如果您没有使用正确的工具,那么将这些情况分开是非常困难和耗时的,尤其是当您的代码增长并变得更加互联时。另一方面,如果您使用正确的工具,它将为您提供与您尝试解决的问题相关的错误。

如果您在javascript中构建一些动态HTML,那么适合您任务的工具就是Handlebars.js这样的模板库。

至少,如果你不想使用库,你应该根据逻辑块一次构建一个字符串,然后连接各个部分。这将使您的代码更易读,更可写,也更容易调试。

从ES6开始,您可以使用Template literals使字符串构造更容易。

答案 1 :(得分:-1)

我认为你可以使用

onclick='openInfoWindow(resultsMap);'

如果不更改resultsMap的值,则结果与将静态sting传递给函数的结果相同。