"Silly Story Generator" assignment

MDN Learn
#1

I’m working through the “silly story generator” assignment. Who could help find what is wrong with my js code below?

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:. Bob saw the whole thing, but he 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;
var xItem = randomValueFromArray(insertX);
var xItem = randomValueFromArray(insertX);
var yItem = randomValueFromArray(insertY);
var zItem = randomValueFromArray(insertZ);

newStory.replace(’:insertx:’,xItem);
newStory.replace(’:inserty:’,yItem);
newStory.replace(’:insertz:’,zItem);
newStory.replace(’:insertx:’,xItem);

if(customName.value != ‘’) {
var name = customName.value;

newStory.replace('Bob',name);

}

if (document.getElementById(“uk”).checked) {
var weight = Math.round(300 * 0.071429) + ’ stone’;
var temperature = Math.round(34.444444) + ’ centigrade’;
newStory.replace(‘94 farenheit’, temperature);
newStory.replace(‘300 pounds’, weight);
}

story.textContent = newStory;
story.style.visibility = ‘visible’;
}

1 Like
#2

Sure thing.

There are a couple of issues here.

First, a minor issue — you should get rid of the duplicate line here:

var xItem = randomValueFromArray(insertX);
var xItem = randomValueFromArray(insertX);

Second, the more major issue — each instance of

newStory.replace

should be replaced by

newStory = newStory.replace

This is because replace() replaces the first instance it finds of the first parameter with the second parameter, and returns the entire string with the replacement contained inside. If you don’t assign the return value to anything, it won’t show up anywhere.

Here at each stage we are assigning the result of replacing a substring inside newStory back to newStory. Each call to replace() updates a small part of it, iteratively.

1 Like
#3

Everything works now. Thank you, Chris. Appreciate your help.