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

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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>
    0
  • E
    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.

    0