如何使用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() 只有 returns 一个元素。如果您想查找多个元素，您可以使用多个 getElementById() 调用，或者向元素添加 class 并使用 getElementsByClassName()，其中 returns 一个 HTMLCollection。

您没有删除图例的代码。要在图层隐藏时隐藏图例，您的最终 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";
  }
};

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

How to set multiple getelementsbyid with if condition

javascript

if-statement

getelementbyid

geoserver

node.js