Insert html into a div based on select box value

Question

I'm trying to get a button to insert html into a div based on a select box value. It is not working. When I press the button, nothing happens. Not sure if I'm missing something? From what I can tell the code should work, but it doesn't, so that means I'm definitely not in the right waters.

<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

You're missing a double quotation at line var a = near the string 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> 

Also you can use ` to write multiline string, like this

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

try using jQuery to achieve your goal. Try var selectedNewsletter = $('#nbox').val(); instead of

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

And then append the html code to the div. You can do this by using the statement $('#col').append(a); instead of col.innerHTML = a;

Answer 3

You made a mistake in javascript. String is not correctly created. Just make little change in javascript code and it should work:

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