javascript - 根据选择框值将html插入div

我试图获得一个按钮，以基于选择框值将html插入div。它不起作用。当我按下按钮时，什么也没发生。不知道我是否想念什么？据我所知，代码应该可以运行，但是不能运行，因此这意味着我绝对不在正确的位置。

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

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

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

Java脚本

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

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

最佳答案

您在字符串var a =附近的行Newsletter 2017缺少双引号。

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

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

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

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

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

您也可以使用`编写多行字符串，如下所示

var a = `
    <h2>2017</h2>
    <img
        alt='newsletter'
        src='http://clone.kmvcss.org/wp-content/themes/nu2013/images/2017-Newsletter.png'
        width='60px'
        height='180px'
    />
    <a href='https://drive.google.com/open?id=0B0vGa180vtK9aDlPZlFIMTRmcDJvZ0l5Ti1WMGxIV3RMV3RV'>
        Newsletter 2017
    </a>
`