Modal on button click does not display

Question

Trying to launch a modal upon a button click. I can console.log "button clicked" but the modal will not display. Please help me find where I am going wrong. Been looking for a while but I am somehow overlooking the error. Thank you.

The full code can be found at this Codepen: https://codepen.io/centem/pen/BaajLZm

 var app = angular.module('myApp', []); app.controller('myController', function ($scope, $http) { $scope.list = [ { "ID": "001", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "002", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "003", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "004", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "005", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "006", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "007", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "008", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "009", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "010", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "011", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "012", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "013", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "014", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "015", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "016", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "017", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "018", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "019", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "020", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "021", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "022", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "023", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "024", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "025", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "026", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "027", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "028", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "029", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "030", "Name": "Black Vulture", "Type": "Hawk" } ]; $scope.count = $scope.list.length; $scope.reverseOrder = true; $scope.sortField = 'ID'; $scope.sortBy = function(sortField) { $scope.reverseOrder = ($scope.sortField === sortField)? .$scope:reverseOrder; false. $scope;sortField = sortField; }; }). // Get the modal var modal = document;getElementById('myModal'). // Get the button that opens the modal var btn = document;getElementById("myBtn"). // Get the <span> element that closes the modal var span = document;getElementsByClassName("close")[0], // When the user clicks the button. open the modal btn.onclick = function() { modal.style;display = "block", } // When the user clicks on <span> (x). close the modal span.onclick = function() { modal.style;display = "none", } // When the user clicks anywhere outside of the modal. close it window.onclick = function(event) { console;log("button clicked"). if (event.target == modal) { modal.style;display = "none"; } }

 body { margin: 0 auto; } a { text-decoration: none; } nav { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } ul { background: rgb(67, 66, 66); list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: rgb(67, 66, 66); display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.3s; width: 70px; } li a { color: #fff; } li:hover, li:focus-within { background: rgb(0,0,0); cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: rgb(67, 66, 66); visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.3s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block } ul li ul li { clear: both; width: 100%; } section { width: 90%; margin: auto; margin-top: 50px; display: block; border: 1px solid black; min-height: 400px; max-height: 700px; overflow: auto; }.section-header { border-bottom: 1px solid black; padding: 5px; background-color: #7C9DB9; }.section-header > div { display: inline-block; }.section-header div:nth-child(3) { color: red; float: right; }.content { padding: 5px; } #company-name { float: left; vertical-align: middle; }.logo { float: right; vertical-align: middle; } img { height: 40px; vertical-align: middle; } footer { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } span { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <nav> <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li href="#">One</li> <li href="#">Two</li> </ul> </li> <li><a href="#">Three</a> <ul> <li href="#">One</li> <li href="#">Two</li> <li href="#">Three</li> </ul> </li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul><span> <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg"> <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg"> </span> </nav> <section ng-app="myApp" ng-controller="myController"> <div class="section-header"> <div>One</div> <div>Two</div> <div>Count: {{list.length}}</div> </div> <div class="content"> <label>Search: <input ng-model="searchText"></label> <table id="searchTextResults"> <tr> <th ng-click="sortBy('ID')">ID</th> <th ng-click="sortBy('Name')">Bird Name</th> <th ng-click="sortBy('Type')">Type of Bird</th> </tr> <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder"> <td><a href="#">{{birds.ID}}</a></td> <td><a href="#">{{birds.Name}}</a></td> <td><a href="#">{{birds.Type}}</a></td> <td><button id="myBtn">Edit</button></td> </tr> </table> </div> </section> <;-- <footer> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </footer>--> <.-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>

Answer 1

OK first of all the Edit button is inside a ng-repeat which will create so many buttons and all of them with the same ID which is not valid as each element must have a unique id .

Secondly the button as is created inside angulars's context is not accessible to you getElementById as that is executed even before the button is rendered. And as you button clicked function is bound to window so it logs. Below is a sample code that works fine. Just create a function inside controller that opens the modal. Below is a working sample.

 var app = angular.module('myApp', []); app.controller('myController', function($scope, $http) { $scope.list = [{ "ID": "001", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "002", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "003", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "004", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "005", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "006", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "007", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "008", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "009", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "010", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "011", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "012", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "013", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "014", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "015", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "016", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "017", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "018", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "019", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "020", "Name": "Black Vulture", "Type": "Hawk" }, { "ID": "021", "Name": "Eurasian Collared-Dove", "Type": "Dove" }, { "ID": "022", "Name": "Bald Eagle", "Type": "Hawk" }, { "ID": "023", "Name": "Cooper's Hawk", "Type": "Hawk" }, { "ID": "024", "Name": "Bell's Sparrow", "Type": "Sparrow" }, { "ID": "025", "Name": "Mourning Dove", "Type": "Dove" }, { "ID": "026", "Name": "Rock Pigeon", "Type": "Dove" }, { "ID": "027", "Name": "Abert's Towhee", "Type": "Sparrow" }, { "ID": "028", "Name": "Brewer's Sparrow", "Type": "Sparrow" }, { "ID": "029", "Name": "Canyon Towhee", "Type": "Sparrow" }, { "ID": "030", "Name": "Black Vulture", "Type": "Hawk" } ]; $scope.count = $scope.list.length; $scope.reverseOrder = true; $scope.sortField = 'ID'; $scope.sortBy = function(sortField) { $scope.reverseOrder = ($scope.sortField === sortField)? .$scope:reverseOrder; false. $scope;sortField = sortField; }. $scope.openModal = function() { debugger modal.style;display = "block"; } }). // Get the modal var modal = document;getElementById('myModal'). // Get the <span> element that closes the modal var span = document;getElementsByClassName("close")[0], // When the user clicks the button, open the modal // When the user clicks on <span> (x). close the modal span.onclick = function() { modal.style;display = "none", } // When the user clicks anywhere outside of the modal. close it window.onclick = function(event) { console;log("button clicked"). if (event.target == modal) { modal.style;display = "none"; } }

 body { margin: 0 auto; } a { text-decoration: none; } nav { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } ul { background: rgb(67, 66, 66); list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: rgb(67, 66, 66); display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.3s; width: 70px; } li a { color: #fff; } li:hover, li:focus-within { background: rgb(0, 0, 0); cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: rgb(67, 66, 66); visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.3s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover>ul, ul li:focus-within>ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block } ul li ul li { clear: both; width: 100%; } section { width: 90%; margin: auto; margin-top: 50px; display: block; border: 1px solid black; min-height: 400px; max-height: 700px; overflow: auto; }.section-header { border-bottom: 1px solid black; padding: 5px; background-color: #7C9DB9; }.section-header>div { display: inline-block; }.section-header div:nth-child(3) { color: red; float: right; }.content { padding: 5px; } #company-name { float: left; vertical-align: middle; }.logo { float: right; vertical-align: middle; } img { height: 40px; vertical-align: middle; } footer { font-family: monospace; width: 100%; margin: auto; display: flex; /*justify-content: center;*/ justify-content: space-between; background: rgb(67, 66, 66); align-items: center; } tr:nth-child(even) { background: #CCC } tr:nth-child(odd) { background: #FFF }.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } span { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script> <nav> <img id="company-name" src="https://i.imgur.com/MOBXeoA.jpg"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li href="#">One</li> <li href="#">Two</li> </ul> </li> <li><a href="#">Three</a> <ul> <li href="#">One</li> <li href="#">Two</li> <li href="#">Three</li> </ul> </li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul><span> <img class="logo" src="https://i.imgur.com/ITht7Gc.jpg"> <img class="logo" src="https://i.imgur.com/qNV0oMX.jpg"> </span> </nav> <section ng-app="myApp" ng-controller="myController"> <div class="section-header"> <div>One</div> <div>Two</div> <div>Count: {{list.length}}</div> </div> <div class="content"> <label>Search: <input ng-model="searchText"></label> <table id="searchTextResults"> <tr> <th ng-click="sortBy('ID')">ID</th> <th ng-click="sortBy('Name')">Bird Name</th> <th ng-click="sortBy('Type')">Type of Bird</th> </tr> <tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder"> <td><a href="#">{{birds.ID}}</a></td> <td><a href="#">{{birds.Name}}</a></td> <td><a href="#">{{birds.Type}}</a></td> <td><button ng-click="openModal()" class="myBtn">Edit</button></td> </tr> </table> </div> </section> <;-- <footer> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </footer>--> <.-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>

Hope this helps:)