javascript - Uncaught ReferenceError : showTechnical is not defined

Question

我正在尝试添加选项卡，以便当单击它们时，它会显示不同的内容。但是，我收到 3 个控制台错误。两次是加载时，第三次是每次点击技术链接时。 页面加载时出现的两个是:

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

<小时/>

Javascript:

<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 称为几行以下:

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

Answer 1

您正在寻找的是innerHTML或者在 jQuery 中，.html()

不幸的是，你不能像那样多行 JS 字符串，这也会破坏你的代码。

您必须:

• 添加尾随 \对于每一行。但这太乏味了。

  var string = "Some \
                multiline \
                string";
  

• 或者在一行中完成所有操作。但这太困惑了。

• 或者将您拥有的"template"放入 <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);