<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script> var count = 0; function myFunction() { document.getElementById("MyEdit").innerHTML = "My new text!"; } function countInc() { document.getElementById("CountInc").innerHTML = count + 1; } </script> <div class="row"> <div class="col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Student Name </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> </div> <div class="col-md-1"><input type="image" src="http://www.excelsioreducation.net/images/greenButton.png" class="img-responsive" alt="Green Button" onclick="myFunction()"></div> <div class="col-md-1"><input type="image" src="http://www.excelsioreducation.net/images/redButton.png" value=""class="img-responsive" alt="Green Button"onclick="countInc()"></div> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"># Reps</h3> </div> <div class="panel-body"> <div id="MyEdit"> This text will change </div> </div> </div> </div> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"># Correct</h3> </div> <div class="panel-body"> <div id="CountInc"> </div> </div> </div> </div> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">% Correct</h3> </div> <div class="panel-body"> % </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Student Name </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> </div> <div class="col-md-2"> <input type="button" value="Count" id="countButton" /> <p>The button was pressed <span id="displayCount">0</span> times.</p> <script type="text/javascript"> var count = 0; var button = document.getElementById("countButton"); var display = document.getElementById("displayCount"); button.onclick = function(){ count++; display.innerHTML = count; } </script> </div> </div>

<script> function myFunction() { document.getElementById("MyEdit").innerHTML = "My new text!"; } </script>