Ionic 3 cordova 按钮点击错误答案

【问题标题】：Ionic 3 cordova button clicking errorIonic 3 cordova 按钮点击错误
【发布时间】：2018-11-13 15:41:32
【问题描述】：

当我点击第一个 div 时，它给了我一个错误

无法读取 null 的属性“样式”

为什么会出现这个错误？当我使用网格时它工作正常，但是当我使用 div 时它给了我错误

这是我的html

<ion-header>

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" 

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


 <meta name="viewport" content="width=device-width, initial-scale=1, 
 maximum-scale=1, user-scalable=no">
 <!-- jQuery library -->
 <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>

 <!-- Latest compiled JavaScript --> 
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>


 </ion-header>




 <ion-content class="col-xs-12">
     <div class="number">
         9
     </div>

    <div class="center">
  <img src="assets/imgs/wajid.jpg" style="width: 84%;">

 </div>

  <div class="col-xl-12" >



  <div class = "line1" style="width: 18%;" (click)="p10_1()">
  <div class = "sections">نَ</div><!--
 --><div class = "sections">ذِ</div><!--
 --><div class = "sections">اَ</div>


 </div>

这是我的 .ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NativeAudio } from '@ionic-native/native-audio';


@Component({
   selector: 'page-home',
   templateUrl: 'home.html'

 })
 export class HomePage {

    constructor(public navCtrl: NavController) { 

   }


    p10_1()
   {
        document.getElementById("sec1").style.color = "red";
        document.getElementById("sec2").style.color = "red";
        document.getElementById("sec3").style.color = "red"
        var bleep = new Audio();
        bleep.src = './assets/sounds/q1p10_1.mp3';
        bleep.play();
        bleep.onended = function() {
        document.getElementById("sec1").style.color = "black";
        document.getElementById("sec2").style.color = "black";
        document.getElementById("sec3").style.color = "black";
       }
      }

【问题讨论】：

嗯，是的..您正在调用 id 为 sec1、sec2 和 sec3 的元素，但根据您发布的 html 文件，它们不存在
而且<ion-header> 标签不等于html <head> 标签，它是您应用程序的标题（导航和标题栏）的组件

标签： html cordova typescript ionic-framework ionic3

【解决方案1】：

您的 html 中缺少 id。因此它没有连接到您的 .ts 文件。

 <div class="col-xl-12" >
  <div class = "line1" style="width: 18%;" (click)="p10_1()">
  <div id="sec1" class = "sections">نَ</div>
  <div id="sec2" class = "sections">ذِ</div>
  <div id="sec3" class = "sections">اَ</div>
 </div>

【讨论】：