More JS practice help!

JavaScript
1

Continuing on my JS practice binge. I cannot figure out why the variable, “name” is not showing up on web page. Anyone got any ideas - thank you in advance! I am sure it’s something obvious but i just don’t see it.

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Silly story generator</title>
  </head>

  <body>
    <div>
      <label for="customname">Enter custom name:</label>
      <input id="customname" type="text" placeholder="">
    </div>
    <div>
      <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
      <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
    </div>
    <div>
      <button class="randomize">Generate random story</button>
    </div>
    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
    <p class="story"></p>

    <script type="text/javascript" src="js_assessment.js">

    </script>

  </body>

</html>

JS code:

// alert("is this mike on")

var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');

function randomValueFromArray(array){
  return array[Math.floor(Math.random()*array.length)];
}

var storyText =
"It was 94 farenheit outside, so " + insertX +
" went for a walk. When they got to " + insertY +
", they stared in horror for a few moments, then " + insertZ +  "." +
name + " saw the whole thing, but was not surprised — " + insertX +
" weighs 300 pounds, and it was a hot day.";


 var insertX = ["Willy the Goblin","Big Daddy","Father Christmas"];

 var insertY = ["the soup kitchen","Disneyland","the White House"];

 var insertZ = ["spontaneously combusted", "melted into a puddle on the sidewalk", "turned into a slug and crawled away"];


 randomize.addEventListener('click', result);

function result() {

  var newStory = storyText;
  console.log("1st: "+name);

  if(customName.value != '') {
    var name = customName.value;
  }else {
    var name = "Bob";
  }
  console.log("2nd: "+name);

  var xItem = randomValueFromArray(insertX);
  var yItem = randomValueFromArray(insertY);
  var zItem = randomValueFromArray(insertZ);


  var newStory = newStory.replace(undefined, xItem);
  var newStory = newStory.replace(undefined, yItem);
  var newStory = newStory.replace(undefined, zItem);
  var newStory = newStory.replace(undefined, xItem);


  if(document.getElementById("uk").checked) {
    var weight = Math.round(300);
    var temperature =  Math.round(94);

  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}
3

Thanks @camperextraordinaire! If you (or anyone else!) have any feedback on my solution for fixing the “name” issue, please let me know and thanks:

var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');

function randomValueFromArray(array){
  return array[Math.floor(Math.random()*array.length)];
}

var storyText =
"It was 94 farenheit outside, so " + insertX +
" went for a walk. When they got to " + insertY +
", they stared in horror for a few moments, then " + insertZ +  ". " +
name + " saw the whole thing, but was not surprised — " + insertX +
" weighs 300 pounds, and it was a hot day.";

 var name = "Bob";

 var insertX = ["Willy the Goblin","Big Daddy","Father Christmas"];

 var insertY = ["the soup kitchen","Disneyland","the White House"];

 var insertZ = ["spontaneously combusted", "melted into a puddle on the sidewalk", "turned into a slug and crawled away"];


 randomize.addEventListener('click', result);

function result() {

  var newStory = storyText;


  if(customName.value != '') {
    var newName = customName.value;
    var newStory = newStory.replace(name, newName);
  }


  var xItem = randomValueFromArray(insertX);
  var yItem = randomValueFromArray(insertY);
  var zItem = randomValueFromArray(insertZ);


  var newStory = newStory.replace(undefined, xItem);
  var newStory = newStory.replace(undefined, yItem);
  var newStory = newStory.replace(undefined, zItem);
  var newStory = newStory.replace(undefined, xItem);


  if(document.getElementById("uk").checked) {
    var weight = Math.round(300 * 0.0714286) + " stone";
    var temperature =  Math.round((94-32)*0.5556 ) + " centigrade";
    var newStory = newStory.replace("94 farenheit", temperature);
    var newStory = newStory.replace("300 pounds", weight);
  }

  story.textContent = newStory;
  story.style.visibility = 'visible';
}