ionic app ,on click of a button not work
Question
I am developing an app and this is second screen where i am getting problem. There is a skip button and when i press it the "div containing text in it " should hide .
I have written codes in typescript file "home.ts" and have written html of it it in home.html and css in home.css
there are only 2 screens i have done with these codes,one is splash screen and other one is disclaimer or home screen where i am trying to hide the div with text on click of skip button
Here is home.ts code:
import { Component,ViewChild} from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl:'home.html'
})
export class HomePage {
@ViewChild('username')username;
@ViewChild('password')password;
splash = true;
constructor(public navCtrl: NavController ) {
}
showhide(){
var toggle = function() {
var mydiv = document.getElementById('div');
if (mydiv.style.display === 'block' || mydiv.style.display === ''){
mydiv.style.display = 'none';
}
else{
mydiv.style.display = 'block';
}
}
}
ionViewDidLoad() {
setTimeout(() => this.splash = false, 4000);
}
}
and here is home.html file
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/show.js"></script>
<script src="build/animation.css"></script>
</head>
<body ng-controller="imageshow_hide">
<ion-content>
<div id="custom-overlay"[style.display]="splash ? 'flex': 'none'">
<div class="flb">
<div class="Aligner-item Aligner-item--top">
</div>
<img src="assets/logo.png">
<div class="Aligner-item Aligner-item--bottom">
</div>
</div>
</div>
<div class="scroll-content">
<img class="image1" src="assets/bg2.jpg"/>
<div id="hides" class="image2"><img src="assets/whitetop.png"/>
<h2 style="text-align:center">WHY SHOULD I USE THIS APP
</h2>
<p>Our thoughts and everything we see feel hear taste and smell
shapes the unconscious mind.
By listening to affirmations daily.guided meditation and performing simple NLP techniques
you can re-program your mind to focus on the results you desire in life and develop
positive patterns for motivation and action
</p>
</div>
<div id="hides" class="image3"><img src="assets/whitebottom.png"/>
<h2 style="text-align:center">HOW TO USE THIS APP</h2>
<p>Don't listen to any of these recordings
while operating machinery or driving.only listen to these materials if you
are in safe place where you can relax.
All contents provided within their applications are NOT meant to replace
any qualified medical treatment or health related advice.
If you suffer from any mental disorder,NOT Listen to this material.
MindVolution accepts No responsibility or liability for any injury,loss or damage
as direct or indirect result of the usage of the information here presented.
</p>
</div>
<button (click)="showhide()" id="hides">
<img class="image4" ng-hide="checked" src="assets/skip.png"/>
</button>
<img class="image5"src="assets/sound icon.png"/>
<img class="image6"src="assets/sound icon.png"/>
</div>
</ion-content>
</body>
</html>
2 answers
solution1
0 2017-11-14 13:25:40
you are looking for a div with id "div" and there isn't any in your html, did you intend to use id "hidden"? Then your code should be var mydiv = document.getElementById('hidden') .
A simpler way to achieve this is to create a boolean variable in your home.ts, eg isVisible, use *ngIf on the tags you want to depend on it's value to show or not, and then update it's value once the user clicks on the button. eg
<div *ngIf="isVisible">Content to hide when user clicks the button</div>
<button (click)="isVisible = !isVisible;"></button>
To hide the splash screen is a good practice to use this.platform.ready().then(()={this.splashScreen.hide();}); , by the way, you don't seem to be importing and using the splash screen native plugin, you are just giving a value to the variable splash.
solution2
0 ACCPTED 2017-11-15 06:33:27
I am using this in my home.ts file
showhide(){
var toggle = function() {
var mydiv = document.getElementById('hidden');
if (mydiv.style.display === 'block' || mydiv.style.display === ''){
mydiv.style.display ='none';
}
else{
mydiv.style.display ='block';
}
}
}
Hidden is the id of two divs which i want to hide on click of button ( this button has an image inside it).this button has id =skipbtn
Here is html code of skip button where user will press to hide the tow divs containing image
<button click="showhide()" >
<img class="image4" id="skipbtn" ng-hide="checked" src="assets/skip.png"/>
</button>
Here are two divs which need to be hide on click of skip button
<div class="scroll-content">
<img class="image1" src="assets/bg2.jpg"/>
<div id="hidden" class="image2"><img src="assets/whitetop.png"/>
<h2 style="text-align:center">WHY SHOULD I USE THIS APP
</h2>
<p>Our thoughts and everything we see feel hear taste and smell
shapes the unconscious mind.
By listening to affirmations daily.guided meditation and performing simple NLP techniques
you can re-program your mind to focus on the results you desire in life and develop
positive patterns for motivation and action
</p>
</div>
<div id="hidden" class="image3"><img src="assets/whitebottom.png"/>
<h2 style="text-align:center">HOW TO USE THIS APP</h2>
<p>Don't listen to any of these recordings
while operating machinery or driving.only listen to these materials if you
are in safe place where you can relax.
All contents provided within their applications are NOT meant to replace
any qualified medical treatment or health related advice.
If you suffer from any mental disorder,NOT Listen to this material.
MindVolution accepts No responsibility or liability for any injury,loss or damage
as direct or indirect result of the usage of the information here presented.
</p>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.