Web speech APIでテキストボックス内の文字列を使って動作をさせたい

前提

javascriptのwev speech API の中にテキストボックスの要素を引っ張ってこれない

実現したいこと

・音声認識中、テキストボックス内の文字列をマイクで認識したときに、画面中央に配置してあるボックスの色を変えたい

発生している問題・エラーメッセージ

ボックスの色が変わらない

試したこと

・let nameTextの読み込み位置をずらす
・nameText.valueに変え試す
・あらかじめ文字列を決めておくと動作するので、nameTextの要素をひっぱってこれていない、またはそもそも実行不可能？

html
1<!DOCTYPE html>
2<head lang="ja-JP">
3    <meta charset="utf-8">
4    <title>呼び出し反応システム</title>
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
7    <link href="style6.css" rel="stylesheet">
8</head>
9<body>
10    <div class="text-center">
11        <label>名前：<input type="text" id="nameText"></label>
12        <input type="button" value="Check" id="checkButton">
13        </div>
14        
15        <div class="text-center" id="msg"></div>
16        
17<div id="content">
18      <div id="box">
19      </div>
20</div>
21<div class="text-center" >
22    <button id="startRecBtn" class="btn btn-default">マイク 開始</button>
23    <button id="stopRecBtn" class="btn btn-default">マイク 停止</button>
24</div>
25<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
26    <script src="main2.js"></script>
27</body>
28</html>

css
1@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
2
3body {
4  position:relative;
5  font-family: 'Noto Sans Japanese', serif;
6    max-width:640px;
7    margin: 0 auto;
8}
9
10#content{
11    margin: 0 auto;
12   width:300px;
13   height: 200px;
14   padding:20px;
15   position: relative;
16 }
17
18
19#box{
20    position: absolute;
21    top: 25px;
22     right:75px;
23    width:150px;
24    height:150px;
25    
26    background-color:rgb(255, 255, 255);
27
28  animation: flash 1s ease infinite;
29}
30@keyframes flash {
31  0%,100% {
32    opacity: 1;
33  }
34  50% {
35    opacity: 0;
36  }
37}
38
39
40#startReBtn{
41  position:absolute;
42  top: 100px;
43  right: 10px;
44  margin-left: auto;
45    margin-right: auto;
46}
47
48#stopReBtn{
49  position:absolute;
50  top: 100px;
51  right: 300px;
52  margin-left: auto;
53    margin-right: auto;
54}
55
56#text{
57    margin-top:40px;
58}