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

您在字符串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>
`

Answer 2

尝试使用jQuery来实现您的目标。请尝试var selectedNewsletter = $('#nbox').val();而不是

var selection = document.getElementById("nbox");
var selectedNewsletter = selection[selection.selectedIndex].value;

然后将html代码附加到div。您可以使用语句$('#col').append(a);代替col.innerHTML = a;

来执行此操作

Answer 3

你在javascript中犯了一个错误。字符串未正确创建。只需在javascript代码中稍作修改就可以了：

的JavaScript

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

根据选择框值将html插入div

3 个答案: