Why is javascript not recognizing my input as a varaible?

Question

I'm working on this piece of code, and, when you enter you name through the settings button, the code should save your name in the variable "inputname" so when you speak "hello" to the program, the program should output "Hello" + the name you entered, but for some reason it won't work. Why is that?

The code is attached below and the demo website is linked here: https://javascript-test-3.stcollier.repl.co/

function record() {
  var recognition = new webkitSpeechRecognition();
  recognition.lang = "en-GB";
  recognition.start();
  recognition.continuous = true;
  recognition.onresult = function(event) {
    let transcript = event.results[0][0].transcript;
    var str = transcript;
    let msg_hello = ['Hello ' + inputname, 'Hello!', 'Hey ' + inputname];
    if (str.includes('hello')) {
      document.getElementById("output").innerHTML = (msg_hello[Math.floor(Math.random() * msg_hello.length)]);
      responsiveVoice.speak(msg_hello[Math.floor(Math.random() * msg_hello.length)]);
    } else {
      document.getElementById('output').innerHTML = "I don't know what you mean."
      responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random() * msg_notunderstood.length)]);
    }
    document.getElementById('speechToText').value = event.results[0][0].transcript;
  }
}

//Mic Trigger Key
document.body.onkeyup = function(e) {
  if (e.keyCode == 32) {
    record()
  }
}
//Modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

//Input
function saveName() {
    var inputname = document.getElementById('savedName').value;
    alert("You entered your name as " + inputname)
    return false;
}

#output {
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
}
/* Modal Stuff */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css">
   <title>Document</title>
</head>
<body>
   <label for="Speech Recognition">Speech Recognition</label>
   <input type="text" name="" id="speechToText" placeholder="Speak Something" disabled="disabled">
   <button onclick="record()">Record</button>
   <p id="output"></p>
   <button id="myBtn">Settings</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <input placeholder="Enter your name" type="text" size="12" id="savedName" />
    <button onclick="return saveName();">Save</button><span title="We use your name for making your experience with Argon more personal." style="cursor:help;"> &#63;</span>
   <script src="https://code.responsivevoice.org/responsivevoice.js?key=x9uXdCB8"></script>
   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script src="script.js"></script>
</body>
</html>

Thanks for any help.

The problem is very simple. You are declaring `inputname` within the function so it's only available within that function. Move the declaration outside of the function to make it available to other functions. — Scott Marcus, Jun 25 '21 at 22:51
Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Sebastian Simon, Jun 25 '21 at 23:23

Kinglish · Accepted Answer · 2021-06-25T23:47:08.750

2

When you define a variable (using var) inside a function, that confines that variable to that function only. Define inputname outside of the functions so other functions have access to it

var inputname

function record() {
  ....
  if (!inputname) inputname = 'You'; // default
  let msg_hello = ['Hello ' + inputname,  ....
  ....
}

function saveName() {
   inputname = document.getElementById('savedName').value;
   ...

edited Jun 25 '21 at 23:47

answered Jun 25 '21 at 22:50

Kinglish

23,358
3
22
43

Thanks, I didn't know that! But now, however, the innerHTML is printing "undefined" instead of the inputted name. I'm sorry for another question, but is there a way to fix this? – Scollier Jun 25 '21 at 23:30
1

You are setting your name first? The alert is OK? I added a line to my answer to prevent 'undefined' .. and you're sure you removed the `var` from the `saveName` function? – Kinglish Jun 25 '21 at 23:48

Why is javascript not recognizing my input as a varaible?

1 Answers1