Javascript 按钮重定向到页面而我不请求此行为

我有一个按钮，我试图让它根据选择框中的选项将html插入到列中。我看了十几遍我的代码，不明白它为什么会这样做：我没有将代码插入div并显示出来，而是重定向到另一个网页“../newlsetters-%newsletteryear%”。不知道是什么导致了这一切。任何帮助都将不胜感激

<h1>KMVCSS Newsletters</h1> <h1 style="font-weight: 100">2014 - 2017</h1>
<div class="n-body">
<form>
<select id="nbox" name="newsletters">
<option value="2017">Newsletter 2017</option>
</select>

<button id="nbutton" onclick="displayNewsletter();">Get Newsletter 
Link</button>
</form>

<div class="n-row">
<div id="col">
</div>
</div>
</div>

<script>
function displayNewsletter() {
    var selectedNewsletter = document.getElementById("nbox").value;
    var col= document.getElementById("col");
    var a = "<h2>2017</h2> <img alt='newsletter' src='http://clone.kmvcss.org/wpcontent/themes/nu2013/images/2017-Newsletter.png' width='60px' height='180px'/> <a href='https://drive.google.com/open?id=0B0vGa180vtK9aDlPZlFIMTRmcDJvZ0l5Ti1WMGxIV3RMV3RV'>";


    if (selectedNewsletter === "2017") {
        col.innerHtml = a;
}

</script>

KMVCSS通讯2014-2017
2017年通讯
获取时事通讯
链接
功能显示通讯（）{
var selectedNewsletter=document.getElementById（“nbox”）.value；
var col=document.getElementById（“col”）；
var a=“2017”；
如果（选择通讯==“2017”）{
col.innerHtml=a；
}

获取时事通讯
链接

默认情况下，它是一个提交按钮，浏览器执行表单提交，随后重定向到表单中指定的

url

（在您的情况下，它是空的）。

获取新闻稿
链接

---

默认情况下，它是一个提交按钮，浏览器执行表单提交，随后重定向到表单中指定的

url

（在您的情况下，它是空的）。

您需要将return false添加到函数中

<h1>KMVCSS Newsletters</h1> <h1 style="font-weight: 100">2014 - 2017</h1>
<div class="n-body">
<form action="post" action="">
<select id="nbox" name="newsletters">
<option value="2017">Newsletter 2017</option>
</select>

<button id="nbutton" onclick="displayNewsletter();return false;">Get Newsletter 
Link</button>
</form>

<div class="n-row">
<div id="col">xxx</div>
</div>
</div>

<script>
function displayNewsletter() {
    var selectedNewsletter = document.getElementById("nbox").value;
    var col= document.getElementById("col");
    var a = "<h2>2017</h2> <img alt='newsletter' src='http://clone.kmvcss.org/wpcontent/themes/nu2013/images/2017-Newsletter.png' width='60px' height='180px'/> <a href='https://drive.google.com/open?id=0B0vGa180vtK9aDlPZlFIMTRmcDJvZ0l5Ti1WMGxIV3RMV3RV'>xxx</a>";


    if (selectedNewsletter == "2017") {
        col.innerHTML = a;
    }

    return false;
}

</script>

KMVCSS通讯2014-2017
2017年通讯
获取时事通讯
链接
xxx
功能显示通讯（）{
var selectedNewsletter=document.getElementById（“nbox”）.value；
var col=document.getElementById（“col”）；
var a=“2017”；
如果（选择新闻稿==“2017”）{
col.innerHTML=a；
}
返回false；
}

您需要将return false添加到函数中

<h1>KMVCSS Newsletters</h1> <h1 style="font-weight: 100">2014 - 2017</h1>
<div class="n-body">
<form action="post" action="">
<select id="nbox" name="newsletters">
<option value="2017">Newsletter 2017</option>
</select>

<button id="nbutton" onclick="displayNewsletter();return false;">Get Newsletter 
Link</button>
</form>

<div class="n-row">
<div id="col">xxx</div>
</div>
</div>

<script>
function displayNewsletter() {
    var selectedNewsletter = document.getElementById("nbox").value;
    var col= document.getElementById("col");
    var a = "<h2>2017</h2> <img alt='newsletter' src='http://clone.kmvcss.org/wpcontent/themes/nu2013/images/2017-Newsletter.png' width='60px' height='180px'/> <a href='https://drive.google.com/open?id=0B0vGa180vtK9aDlPZlFIMTRmcDJvZ0l5Ti1WMGxIV3RMV3RV'>xxx</a>";


    if (selectedNewsletter == "2017") {
        col.innerHTML = a;
    }

    return false;
}

</script>

KMVCSS通讯2014-2017
2017年通讯
获取时事通讯
链接
xxx
功能显示通讯（）{
var selectedNewsletter=document.getElementById（“nbox”）.value；
var col=document.getElementById（“col”）；
var a=“2017”；
如果（选择新闻稿==“2017”）{
col.innerHTML=a；
}
返回false；
}

innerHtml

应该是

innerHtml

。你还需要关闭你的

标记。

innerHtml

应该是

innerHtml

。你还需要关闭你的

标记。除了

IE

，默认为

“按钮”

那么我应该从表单标签中删除html吗？当按钮是表单标签的子按钮时，默认情况下它只是一个提交按钮吗？您的问题是：没有指定按钮类型。因此您必须向您的按钮添加

type=“button”

。然后会触发js单击处理程序。除了

IE

之外，默认情况是

“button”

那么我是否要将html从表单标签中删除？当按钮是表单标签的子按钮时，默认情况下它是否只是一个提交按钮？您案例中的问题是：没有指定按钮类型。因此您必须添加

type=“button”"

to you按钮。然后会触发js click处理程序。此代码有效：-尝试将其添加到普通网页并运行它。不使用JSFIDLE。你是对的。我在写评论之前也检查了它，但不知怎的，它不起作用：）我将删除我的评论。此代码有效：-尝试将其添加到普通网页并运行它。不使用jsf艾德尔。你说得对。我在写评论之前也检查了它，但不知怎的它不起作用：）我将删除我的评论。