More JS practice help!

More JS practice help!
0.0 0

#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';
}

#2
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.";

If you are wondering why name does not change when you enter something into the textbox and the button with class=“randomize”, it is because the only place you assign a value to name is in the result function and the value of storyText is initially set outside of the result function, which executes before the result function ever runs.


#3

Thanks @randelldawson! 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';
}

#4

name has special meaning in JavaScript. It refers to the window name and in this case it is Codepen. You can see that if you put console.log(storyText) write after you initialize storyText. Then you assign “Bob” to name. Inside your result function, you attempt to replace name (which is “Bob”) with newName (which is the equal to customName.value if not blank). The problem is, “Bob” is not in the storyText string variable, because “Codepen” was used to build the string. You could try moving the initialization of the name variable before the storyText initialization, to see if that helps you any.