javascript - 表单中的 Javascript 变量

Question

我正在创建一个使用他们的 API 拉下静态谷歌地图图像的过程。

我有一个表单，其中包含带有以下地图图像选项的单选按钮：

 Satellite
 Roadmap
 Hybrid
 Terrain

单选按钮采用一种形式 - 其中一部分如下：

<summary>Basemap</summary>
<div class="group">
    <p>Select a Map Style:</p>
    <p>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Satellite" checked /> Satellite</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Roadmap"/> Roadmap</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Hybrid" /> Hybrid</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Terrain" /> Terrain</label>
    </p>
</div>

我有一个从 html 页面调用的底层 javascript 文档。

它包含以下代码：

var bmStyle = document.getElementById("basemapStyle").value;

if (bmStyle = "Satellite" ) {       
    var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Roadmap" ) {        
    var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Hybrid" )  {        
    var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Terrain" )  {       
    var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

页面加载成功并生成“底图”。但是，选中的单选按钮没有任何区别，并且 if else 语句中唯一的第一个变量似乎已加载。

我觉得 if else 语句中有一些逻辑错误，但我似乎无法理解它。

标签： javascripthtmlformsif-statement

Answer 1

首先：
你的条件中有这个：

if (bmStyle = "卫星")

相反，您应该使用：

if (bmStyle == "卫星")

if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }  

第二：
ID应该是唯一的，所以你必须改变它。

代码解决方案（使用重复的 ID）：

var bmStyle = $('#basemapStyle:checked').val()


if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }