如何使用if条件设置多个getelementsbyid

Question

​

我需要一点帮助。我想用一个按钮显示我的图层和图例。使用此代码，我添加了两个(图例和图层)，但当我取消选中我的按钮时，只有图层正在删除。我也想用同样的按钮删除我的图例。

我无法调整代码，请指导我如何使用多个getelementByID与单个if。

按钮

  <button type="button" class="btn btn-outline-warning"><label>Test Layer <input type="checkbox" id="testlayer" ></label></button>

而JS部分是

testlayer.onclick = function() {

    var testlayerr = new TileLayer({
        source: new TileWMS({
            url: 'http://127.0.0.1:8080/geoserver/wms',
            params: { 'LAYERS': 'MYDB:SoilMap' },
            serverType: 'geoserver',

            transition: 0,
        }),
    });


    var testlayer = new ImageWMS({
        url: 'http://127.0.0.1:8080/geoserver/wms',
        params: { 'LAYERS': 'MYDB:SoilMap' },
        serverType: 'geoserver',

        transition: 0,
    });[![enter image description here][1]][1]



    var updateLegend = function(resolution) {
        var graphicUrl = testlayer.getLegendUrl(resolution);
        var img = document.getElementById('legend');
        img.src = graphicUrl;

    };

    var resolution = map.getView().getResolution();
    updateLegend(resolution);
   

    this.onclick = function() {
        if (document.getElementById("testlayer").checked) {
            map.addLayer(testlayerr);
        } else {

            map.removeLayer(testlayerr);
        }
    };


}

Answer 1

getElementById()只返回一个元素。如果要查找多个元素，可以使用多个getElementById()调用，或者改为向元素添加一个类并使用返回HTMLCollection的getElementsByClassName()。

您没有用于删除图例的代码。要在图层隐藏时隐藏图例，最终的onclick函数需要如下所示：

// your HTML doesn't include the legend ID, so I've set a placeholder of "yourLegendElementId" 
this.onclick = function() {
  // find the legend element
  var legend = document.getElementById("yourLegendElementId");
  if (document.getElementById("testlayer").checked) {
    map.addLayer(testlayerr);
    // make sure the legend is visible
    legend.style.display = "block";
  } else {
    map.removeLayer(testlayerr);
    // make sure the legend is hidden
    legend.style.display = "none";
  }
};