title: how to create and then use your own function inside another javascript
body: <pre><code> var cityToCheck = document.getElementById(&quot;text&quot;).value;
  
   var btn = document.querySelector(&quot;button&quot;);
   btn.addEventListener('click', add);
  
  
  
   function makeCapital(str) {
  
  var firstChar= str.slice(0,1); 
  var otherChars = str.slice(1);
  firstChar = firstChar.toUpperCase(); 
  otherChars = otherChars.toLowerCase(); 
  var cappedString = firstChar + otherChars; 
   return cappedString;
  }
  
  function add() { 
  
  cityToCheck = makeCapital(cityToCheck);
  console.log(cityToCheck);
  
  
  }
  </code></pre>
  <p>Im struggling to understnad the concept of creating a function and then using it somewhere else in the program, cna someone tell me what is wrong with my code and why I am getting an empty string and not a capitalised value of what was in the text box i typed in? im clearly mis understanding  the whole concept despite my hours of trying to get this to work</p>
  <p>thanks all</p>