Why is javascript not recognizing my input as a varaible?

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.

Solution

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;
   ...