선택 상자 값을 기준으로 div에 html을 삽입하십시오.

Question

선택 상자 값에 따라 div에 html을 삽입하는 버튼을 얻으려고합니다. 그것은 작동하지 않습니다. 버튼을 누르면 아무 일도 일어나지 않습니다. 내가 뭔가를 놓치고 있는지 확실하지 않니? 코드가 작동해야한다고 말할 수는 있지만 작동하지 않습니다. 따라서 올바른 바닷물에 있지는 않습니다.

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

자바 스크립트

<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

당신의 목표를 달성하기 위해 jQuery를 사용해보십시오. var selectedNewsletter = $('#nbox').val(); 대신

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

을 시도 그리고 사업부에 HTML 코드를 추가합니다. 문구를 col.innerHTML = a; 대신 $('#col').append(a);

Answer 2

문자열의 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 3

처럼 여러 줄 문자열을 작성하는 `를 사용할 수 있습니다. 문자열이 올바르게 작성되지 않았습니다. 그냥 자바 스크립트 코드에 약간의 변화를 확인하고 그것을 작동합니다 :

자바 스크립트

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