잡히지 않은 referenceError : showTechnical이 정의되어 있지 않습니다.

Question

탭을 추가하려고하는데 클릭 할 때 다른 내용이 표시됩니다. 그러나, 나는 3 개의 콘솔 오류가 발생했습니다. 두 개는로드 중이고 세 번째는 기술 링크를 누를 때마다로드됩니다. 페이지로드에있는 두 사람은 다음과 같습니다

Uncaught Syntaxerror: Unexpected token ILLEGAL 
Uncaught TypeError: Cannot call method 'getcontext' of null 
Uncaught referenceError: showTechnical is not defined 

---

자바 스크립트 :

<script type="text/javascript"> 
function showTechnical() 
{ 
document.getElementById('container123').value=' 
<div class="row" id="technical"> 
<div class="col-md-3"> 
<div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=settlement" />Settlement</div><div  class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=tickets" />Tickets</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=c_tickets" />Complimentary Tickets</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=texes" />Texes</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=p_l_m" />Permits/Licenses/Certificates</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=merchandise" />Merchandise</div> <div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=special_regs" />Special Regulations</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=control_production" />Control of Production</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=duration_performance" />Duration Performance</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=support_talent" />Support Talent</div> </div> 


<div class="col-md-3"> 
<div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=prod_office" />Production Office</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=dress_rooms" />Dressing Rooms</div> <div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=runner" />Runner</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=stage_size" />Stage Size</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=house_blacks" />House Blacks</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=barricade" />Barricade</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=foh_mix_position" />FOH Mix Position</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=dj_riser" />DJ Riser</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=dj_equip" />DJ Equipment</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=stagehands" />Stagehands</div>  </div> 

<div class="col-md-3"> 
<div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=foh_speaker_system" />FOH Speaker System</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=foh_console" />FOH Console</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=foh_effects" />FOH Effects</div> <div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=communication" />Communication</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=monitor_system" />Monitor System</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=monitor_wedges" />Monitor Wedges</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=wireless_mic" />Wireless Microphones</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=lighting_req" />Lighting Requirements</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=video_req" />Video Requirements</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=ground_transportation" />Ground Transportation</div> 
</div> 

<div class="col-md-3"> 
<div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=security_req" />Security Requirements</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=towels" />Towels</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=purchasers_p_r" />Purchasers Production Representative</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=equipment_placement" />Equipment Placement</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=sound_checks" />Sound Checks</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=power_req" />Power Requirements</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=parking" />Parking</div><div class="checkbox"> 
<label><input type="checkbox" name="technical[]" value=tour_bus_power" />Tour Bus Power</div> <input class="form-control btn btn-primary" type="submit" value="Next"> </div> 
</div>'; 
}; 
</script> 

그런 다음, 나는 아래로 몇 줄 사업부 전화 :

<div id="container123"> 
<li><a href="#" onclick="showTechnical()">Technical</a></li> 

Answer 1

무엇 찾고있는 것은 innerHTML이거나 jQuery,입니다.

유감스럽게도 코드를 위반하는 JS 문자열을 여러 줄로 표시 할 수 없습니다.

• 모든 라인 후행 \을 추가

  당신이 중 하나는해야합니다. 하지만 그건 지루한 일입니다.

  var string = "Some \ 
         multiline \ 
         string"; 
  

• 또는 1 줄로 모든 것을 수행하십시오. 하지만 그건 지저분 해.

• 또는 "템플릿"을 배치하면 유형이 인 <script>에 있지 구문 분석 할 수없는text/javascript. 그것을 ID와 innerHTML을 사용하여 내용을 얻을. 훨씬 더 청결한.

  <script type="text/template" id="myTemplate"> 
      HTML in here 
  </script> 
  

  당신은

  var contents = document.getElementById('myTemplate').innerHTML; 
  document.getElementById('container123').innerHTML = contents; 
  

  또는 jQuery를

  var contents = $('#myTemplate'); 
  $('#container123').html(contents);