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

Question

我正在尝试获取一个按钮，根据选择框值将 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>

Javascript

<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;
}
}

Answer 1

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

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>
`