silly story generator code pen
Could anyone help me with this, ive compared my work to others and it seems to be exactly the same, however i keep getting an Uncaught SyntaxError: Unexpected identifier message on my JavaScript. if anyone can see why this is happening, please let me know. Thank You 
Hey @Bennbennbenn, here is the html I’ve sorted for you,
<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>
And here is the JS I’ve sorted for you:
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');
function randomValueFromArray(array){
const random = Math.floor(Math.random()*array.length);
return array[random];
}
let storyText = "It was 94 fahrenheit 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 was not surprised — :insertx: weighs 300 pounds, and it was a hot day."
let insertX = ["Willy the Goblin",
"Big Daddy",
"Father Christmas"];
let insertY = ["the soup kitchen",
"Disneyland",
"the White House"];
let insertZ = ["spontaneously combusted",
"melted into a puddle on the sidewalk",
"turned into a slug and crawled away"];
randomize.addEventListener('click', result);
function result() {
let newStory = storyText;
let xItem = randomValueFromArray(insertX)
let yItem = randomValueFromArray(insertY)
let zItem = randomValueFromArray(insertZ)
newStory.replace(/:insertx:/g, xItem);
newStory = newStory.replace("inserty:", yItem);
newStory = newStory.replace("insertz", zItem);
if(customName.value !== '') {
let name = customName.value;
newStory = newStory.replace("Bob", name)
}
if(document.getElementById("uk").checked) {
let weight = Math.round(300 * 0.071428571428571) + "stone";
let temperature = Math.round(94 - 32) * (5/9) + "centigrade";
newStory = newStory.replace("94 fahrenheit", weight);
neStory = newStory.replace("300 pounds", temperature);
}
story.textContent = newStory;
story.style.visibility = 'visible';
}
I cleaned up most of the code, but you’ll have to fix up a code to help you select one of the random values from the insertY or Z arrays:
let randChoice= options[Math.floor(Math.random()*options.length)];
return randChoice;
The one above I used for my rock paper scissors game, below was the array:
let options= ['rock', 'paper', 'scissors']
Then instead of using :insertY: somewhere you could just use the variable where you stored the random choice of values from the array.
In regards to the syntax errors and such, it took me less than a minute to follow through the developer tools and IDE alerts where the errors were, which were just, either a missing bracket to close out the function, etc…
If you still have issues or can’t find the errors let me know and I will take more time to highlight each one with greater specificity than the IDE you are using can.
You are on the right track and your code looks great!! Keep pushing, I know I’ve let a missing comma discourage me when I started out but don’t let it discourage you
Hi there, thank you so much for the feedback! I have managed to find all of the syntax errors however im not quite sure how to create the code for the random values in terms of this project. I tried doing something similar to your example but could not get it to work. Would you be able to explain more how to do this?
thank you!
Great! Could you update your code pen project so I can evaluate your latest better code? Perhaps I could understand the approach you tried to get the random values for the story to appear instead of the text “insert y” or something the like.
And also, take a look at the rock, paper or scissors game I created in the link at the bottom.
To create it the game, the computer needed to choose the values rock, paper or scissors, so I made an array of strings, note below.
let options= ['rock', 'paper', 'scissors']
Then to get the computer to choose one of those values I used the math.floor and math random methods on the array.
let randChoice= options[Math.floor(Math.random()*options.length)];
return randChoice;
So then when it came time for the computer to make a selection, I just made the computers selection equal to randChoice… that way, when play selects rock or any other option, the computer will make a random choice every time.
If you study my code in the game, you will notice that the whole code for the computer choosing a value is:
let options= ['rock', 'paper', 'scissors']
function computerPlay(){
let randChoice= options[Math.floor(Math.random()*options.length)];
return randChoice;
}
So then I call upon the computerplay function to get the random choice of the computer.
Let me know how it goes with your story generator and if you need any more explanation to help clear things up! You should be able to either use the apporach I employed, or figure out how to perfect the one you employed once you understand the mechanics of the having the computer choose rock paper or scissors.
Here is the updated code pen. For some reason the “insertx” won’t change when i run the code. I have no idea why it changes inserty and insertz but not insertx. Maybe you can see the issue?https://codepen.io/bennbennbenn/pen/abmwOZo
Hey, it will take me some time to review and get back to you, in the mean time, check out the methods I discussed with you and see if you can make that approach work?
Hey @Bennbennbenn , I took a look at the code and feeling like its a bit all over the place with a lot trying to happen. Could you give me the source or question of this assignment so I can do it myself and let you know how and why I write my code the way I do?
const customName = document.getElementById(“customname”);
const randomize = document.querySelector(".randomize");
const story = document.querySelector(".story");
function randomValueFromArray(array) {
const random = Math.floor(Math.random() * array.length);
return array[random];
}
let storyText =
“It was 94 fahrenheit 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 was not surprised — :insertx: weighs 300 pounds, and it was a hot day.”;
let insertX = [“Willy the Goblin”, “Big Daddy”, “Father Christmas”];
let insertY = [“the soup kitchen”, “Disneyland”, “the White House”];
let insertZ = [
“spontaneously combusted”,
“melted into a puddle on the sidewalk”,
“turned into a slug and crawled away”
];
randomize.addEventListener(“click”, result);
function result() {
let newStory = storyText;
let xItem = randomValueFromArray(insertX);
let yItem = randomValueFromArray(insertY);
let zItem = randomValueFromArray(insertZ);
newStory = newStory.replace(/:insertx:/g, xItem);
newStory = newStory.replace(":inserty:", yItem);
newStory = newStory.replace(":insertz:", zItem);
if (customName.value !== “”) {
let name = customName.value;
newStory = newStory.replace("Bob", name);
}
if (document.getElementById(“uk”).checked) {
let weight = Math.round(300 * 0.071428571428571) + "stone";
let temperature = Math.round(94 - 32) * (5 / 9) + "centigrade";
newStory = newStory.replace("94 fahrenheit", weight);
neStory = newStory.replace("300 pounds", temperature);
}
story.textContent = newStory;
story.style.visibility = “visible”;
}