"Silly story generator" assessment


(Chris Mills) #21

@bishals is right - this should be querySelector, as it is selecting by the CSS class selector .randomize, not the actual class name, which is randomize.

Also, getElementsByClassName returns an array containing multiple element references, whereas querySelector returns a single element reference — the first element in the document that matches the provided selector.

Therefore the first one won’t work, but the second will.


(jennoskl) #22

I don’t understand this at all. I am using

var randomize = document.querySelector('.randomize');

just like you and several other people have suggested, and I keep getting the error

“randomize is null”

to be honest, I don’t think I have any idea of what I am doing, I am trying to follow people’s advice and not getting anywhere.


(Chris Mills) #23

I am sure there must be a simple explanation here. Can you send me your version of the code?

Send it to me at cmills@mozilla.com, and I’ll help you work out what’s wrong.


(Ameerkabir2) #24

HI everyone here is my version of selly story it seems to be not working help pleas? 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)];
    
    //the flowing three varabkes contains the randome text of the story 
    
    var storyTex = "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 stringX = ["Willy the Goblin","Big Daddy","Father Christmas"];
    
    var stringY = ["the soukitchen","Disneyland","the White House"];
    
    var stringZ = ["spontaneously combusted","melted into a puddle on the sidewalk","turned into a slug and crawled away"];
  
    
    randomize.addEventListener('click', result);

    function result() {

      if(customName.value != '') {
        var name = customName.value;
        newStory = newStory.replace("Bob",variable);

      }

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

      }

      story.textContent = ;
      story.style.visibility = 'visible';
      
      var newStory = storyTex;
      var xItem = stringX;
    
      var yItem = stringY;
      
      var zItem = stringZ;
      newStory = newStroy.replace(":insertx:", stringX);
      newStory = newStory.replace(":inserty:", stringY);
      newStory = newStory.replace(":insertz:", stringZ);
        story = newStory;
      
      
    }
    
  }
</script>

(Chris Mills) #25

Hi there!

From a quick glance, it looks like there are some spelling and other errors in the code that would need to be fixed before the example will work properly. Compare your code with the finished code at https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-finished/main.js.

also, as a hint, search for these errors in your code:

  • storyTex (this appears a couple of times)
  • newStroy
  • The randomValueFromArray() function does not have a closing curly brace.

Let me know if you need any more help. Thanks!


(Henry Grant) #26

Hi there,

May I please have the marking guide for the Silly Story Generator?

Thanks,

RHG


(Chris Mills) #27

Hi Henry,

Sure thing — no worries! You can find what you need below:

Please let me know if you have any more questions.

All the best,

Chris


#28

Hi Folks. Apologies but completely new to this and cant get silly story generator to work. The original story text keeps showing up when I click the button to generate a random story i.e. nothing gets replaced. My code is below. If anyone has any ideas as to why its not working I would appreciate it.

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 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*.0714286) + ‘stones’;
var temperature = Math.round(94-32) + ‘centigrade’;
newStory.replace(‘94 farenheit’, temperature);
newStory.replace(‘300 pounds’, weight);

}

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


(Tom Rooker) #29

Hi everyone - this is probably a really basic question, but just want to make sure I fully understand the script with this.

Could anyone explain the following syntax:

newStory = newStory.replace(’:insertx:’, xItem);

My instinct was to write newStory.replace(’:insertx:’, xItem); without the =, so just wondering why the first bit of the declaration is necessary?

Thanks for you help.