Ionic 3 кордова ошибка нажатия кнопки

Question

Когда я нажимаю на первый div, он выдаёт мне ошибку

не может прочитать свойство "style" со значением 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";
       }
      }

Answer 1

В вашем html отсутствует идентификатор.следовательно, он не подключается к вашему файлу .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>