Monaca Onsen UI Discord Chat Github Repo

error code Uncaught TypeError: Cannot read property 'addEventListener' of null



  • I have problems after adding the “action-sheet” component

    I don’t know if it is caused by

    ons.GestureDetector(document.getElementById('myList')).on("hold", function(event) {
    				// run $scope.myBtnLogic() every 150 millseconds
    				// pass reference ($scope.myBtnLogic), not function call ( $scope.myBtnLogic() )
    				console.log("hold");
    				show();
    			});
    

    all code

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    		<link rel="stylesheet" href="css/onsenui.css">
    		<link rel="stylesheet" href="css/onsen-css-components.min.css">
    
    		<script src="js/jquery.min.js"></script>
    		<script src="js/onsenui.js"></script>
    
    
    		<title></title>
    
    	</head>
    
    
    
    	<body>
    		<ons-page>
    			<ons-toolbar>
    				<div class="center">Tab 1</div>
    			</ons-toolbar>
    
    			<ons-tabbar swipeable position="auto">
    				<ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
    				</ons-tab>
    				<ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
    				</ons-tab>
    			</ons-tabbar>
    		</ons-page>
    
    
    		<template id="tab1.html">
    			<ons-page id="Tab1">
    				<div>
    					<section style="padding:30px">
    						<input name="title" id="title" type="text" class="text-input text-input--underbar" ng-model="text" placeholder="title"
    						 style="display: block; width: 100%">
    					</section>
    
    					<section style="padding:10px 30px 10px 30px">
    						<textarea name="content" id="content" class="textarea" ng-model="text2" placeholder="content" style="width:100%;" rows="15"></textarea>
    					</section>
    
    					<section style="padding:10px 30px 10px 30px">
    						<textarea name="tag" id="tag" class="textarea" ng-model="text2" placeholder="tag for #" style="width:100%;" rows="3"></textarea>
    					</section>
    
    					<p style="text-align: center ;padding:5px 30px 5px 30px">
    						<ons-button modifier="large" id="insert">insert</ons-button>
    					</p>
    					<p style="text-align: center ;padding:5px 30px 5px 30px">
    						<ons-button modifier="large" id="delete">deleteTable</ons-button>
    					</p>
    					<p style="text-align: center ;padding:5px 30px 5px 30px ">
    						<ons-button modifier="large">photograph</ons-button>
    					</p>
    					<p style="text-align: center ;padding:5px 30px 5px 30px">
    						<ons-button modifier="large" id="deleteC">delete</ons-button>
    					</p>
    
    					<section style="padding:10px 30px 10px 30px">
    						<textarea name="deleteContent" id="deleteContent" class="textarea" ng-model="text2" placeholder="deleteContent" style="width:100%;"
    						 rows="3"></textarea>
    					</section>
    				</div>
    
    			</ons-page>
    		</template>
    
    		<template id="tab2.html">
    			<ons-navigator swipeable id="myNavigator" page="tab1.html">
    				<ons-page id="Tab1">
    
    
    					<ons-list id="myList">
    						<ons-list-item modifier="chevron" tappable id="Dlist">x item</ons-list-item>
    
    					</ons-list>
    
    
    				</ons-page>
    			</ons-navigator>
    		</template>
    		<template id="action-sheet.html">
    			<ons-action-sheet id="sheet" cancelable title="From template">
    				<ons-action-sheet-button icon="md-square-o" onclick="app.hideFromTemplate()">Label</ons-action-sheet-button>
    				<ons-action-sheet-button icon="md-square-o" onclick="app.hideFromTemplate()">Label</ons-action-sheet-button>
    				<ons-action-sheet-button icon="md-square-o" onclick="app.hideFromTemplate()" modifier="destructive">Label</ons-action-sheet-button>
    				<ons-action-sheet-button icon="md-close" onclick="app.hideFromTemplate()">Cancel</ons-action-sheet-button>
    			</ons-action-sheet>
    		</template>
    
    
    
    
    
    	</body>
    	
    	<script>
    		document.addEventListener('plusready', function() {
    			//other
    		});
    		ons.ready(function() {
    			ons.createElement('action-sheet.html', {
    					append: true
    				})
    				.then(function(sheet) {
    					app.showFromTemplate = sheet.show.bind(sheet);
    					app.hideFromTemplate = sheet.hide.bind(sheet);
    				});
    		});
    		var database = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
    
    		database.transaction(function(tx) {
    			tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (title, content)');
    		});
    
    		var title = null;
    		var content = null;
    		var id = 0;
    		var app = {};
    		
    		function show() {
    			app.showFromTemplate();
    		}
    		
    		document.addEventListener("init", function(event) {
    			document.getElementById("insert").addEventListener("click", function() {
    
    				title = document.getElementById("title").value;
    				content = document.getElementById("content").value;
    				id++;
    				if (title == "") {
    					title = "No title";
    				};
    				if (content == "") {
    					content = "No content";
    				};
    
    				database.transaction(function(tx) {
    					tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, title, content)');
    					tx.executeSql('INSERT INTO LOGS (title, content) VALUES (?,?)', [title, content]);
    				});
    
    				var list = ons._util.createElement("<ons-list-item></ons-list-item>");
    				list.innerText = title;
    				list.setAttribute("id", "Dlist");
    				list.setAttribute("tappable");
    				list.setAttribute("modifier", "chevron");
    				//list.setAttribute("onclick", 'displayFile(this)');
    				//<ons-list-item modifier="chevron" tappable>x item</ons-list-item>
    
    				$("#myList").append(list);
    				
    				console.log("insert");
    			});
    			document.getElementById("delete").onclick = function() {
    
    				database.transaction(function(tx) {
    
    					tx.executeSql('DROP TABLE LOGS');
    
    				});
    				console.log("delete");
    			};
    
    			document.getElementById("deleteC").onclick = function() {
    				var deleteC = document.getElementById("deleteContent").value;
    				database.transaction(function(tx) {
    
    					tx.executeSql('DELETE FROM LOGS WHERE title=?', [deleteC]);
    
    				});
    				console.log(deleteC);
    			};
    			ons.GestureDetector(document.getElementById('myList')).on("hold", function(event) {
    				// run $scope.myBtnLogic() every 150 millseconds
    				// pass reference ($scope.myBtnLogic), not function call ( $scope.myBtnLogic() )
    				console.log("hold");
    				show();
    			});
    
    
    
    		}, false);
    		
    		
    		
    		/*var hold = document.getElementById("myList");
    		
    		var onHold = ons.GestureDetector(hold).on("hold", function(event) {
    			console.log("hold");
    			show();
    			
    		
    		});*/
    	</script>
    
    </html>
    
    

  • administrators

    Can you recreate this problem in the Onsen UI playground please? https://onsen.io/playground/

    From the code you posted, there looks to be some code missing.