How to change the type of user input? javascript

Question

Here, userchoice is a value from a selected list in HTML which is either Matthew, Mark, Luke or John. I created a function called generate which takes input as parenthesis.

But when I call it with userchoice, the value of userchoice comes as a string and the code does not work. What I want is to take input from the user i.e. Matthew, Mark, Luke, John. So I created objects with similar name.

Does it have some solution or some other ways to do it?

let userchoice;
let Matthew = {
  verse: [`Hi matthew`, `Hello God`, `hello guiye`],
  book: [`Mark`, `john`]
};

let Mark = {
  verse: [`Hi Mark`, `Hello God`],
  book: [`Mark`, `john`]
};
let Luke = {
  verse: [`Hi Luke`, `Hello God`],
  book: [`Mark`, `john`]
};
let John = {
  verse: [`Hi John`, `Hello God`],
  book: [`Mark`, `john`]
};

document.querySelector('#generate').addEventListener('click', function() {
  userChoice = document.querySelector('#selectValue').value;
  generate(userchoice);

});

function generate(input) {
  randomNumber = Math.floor(Math.random() * Matthew.verse.length);
  verseResult = input.verse[randomNumber];
  bookResult = input.book[randomNumber];
  displayVerse.innerText = verseResult;
  displayBook.innerText = bookResult;
}

<form>
  Choose a book :
  <select id="selectValue">
    <option value="Matthew">Matthew</option>
    <option value="Mark">Mark</option>
    <option value="Luke">Luke</option>
    <option value="John">John</option>
  </select>
</form>
<div class="btn">
  <button id="generate">Generate</button>
</div>
<p>Verse:<span id="verse"></span></p>
<p>Book:<span id="book"></span></p>

Welcome to Stack Overflow. It's tough to answer this question without seeing how you've defined your HTML select you mention? — esqew
– esqew, Commented Jun 3, 2020 at 13:40
@gyohza Thanks for suggestion. I am still not confident with javascript. I am trying to improve and your suggestion means lot to me. :) — Saral Karki
– Saral Karki, Commented Jun 3, 2020 at 14:06

mplungjan · Accepted Answer · 2020-06-03 14:03:51Z

Make the whole list of evangelists an object.

NOTE: You could run this onchange instead:

document.getElementById('selectValue').addEventListener('change', function() {
  generate(this.value);
});

Anyway:

let chapters = {
  Matthew : {
    verse: [`Hi matthew`, `Hello God`, `hello guiye`],
    book: [`Mark`, `john`]
  },
  Mark : {
    verse: [`Hi Mark`, `Hello God`],
    book: [`Mark`, `john`]
  },
  Luke : {
   verse: [`Hi Luke`, `Hello God`],
   book: [`Mark`, `john`]
  },
  John : {
    verse: [`Hi John`, `Hello God`],
    book: [`Mark`, `john`]
  }
};  

// generate the dropdown from the chapters object's keys
document.getElementById("selectValue").innerHTML += Object.keys(chapters)
    .map(chapter => `<option value="${chapter}">${chapter}</option>`).join(""); 
    
document.getElementById('generate').addEventListener('click', function() {
  const userChoice = document.getElementById('selectValue').value;
  generate(userChoice);
});

const generate = userChoice => {
  if (!userChoice) return;
  chapter = chapters[userChoice]; // get the selected gospel
  const verse = Math.floor(Math.random() * chapter.verse.length); // you have different lengths 
  const book = Math.floor(Math.random() * chapter.book.length);   // so you need two random numbers

  document.getElementById("displayVerse").innerText = chapter.verse[verse];
  document.getElementById("displayBook").innerText = chapter.book[book];
};

<select id="selectValue">
  <option value="">Please select</option>
</select>
<input type="button" id="generate" value="Generate" />
<div id="displayVerse"></div>
<div id="displayBook"></div>

David · Accepted Answer · 2020-06-03 13:54:30Z

You could make your variables properties on an object, then properties on that object can be selected by a string. For example:

let userchoice;
let Matthew = {
  verse: [`Hi matthew`, `Hello God`, `hello guiye`],
  book: [`Mark`, `john`]
};

let Mark = {
  verse: [`Hi Mark`, `Hello God`],
  book: [`Mark`, `john`]
};
let Luke = {
  verse: [`Hi Luke`, `Hello God`],
  book: [`Mark`, `john`]
};
let John = {
  verse: [`Hi John`, `Hello God`],
  book: [`Mark`, `john`]
};

// a new object containing them as properties
let choices = {
  Matthew,
  Mark,
  Luke,
  John
};

document.querySelector('#generate').addEventListener('click', function() {
  userChoice = document.querySelector('#selectValue').value;
  generate(userChoice);
});

function generate(input) {
  // use the string to choose a property from the new object
  let gospel = choices[input];
  
  randomNumber = Math.floor(Math.random() * gospel.verse.length);
  verseResult = gospel.verse[randomNumber];
  bookResult = gospel.book[randomNumber];
  
  document.querySelector('#verse').innerText = verseResult;
  document.querySelector('#book').innerText = bookResult;
}

<form>
    Choose a book : 
    <select id="selectValue">
        <option value="Matthew">Matthew</option>
        <option value="Mark">Mark</option>
        <option value="Luke">Luke</option>
        <option value="John">John</option>
    </select>
</form>
<div class="btn">
    <button id="generate">Generate</button>
</div>
<p>Verse:<span id="verse"></span></p>
<p>Book:<span id="book"></span></p>

DRY - "Don't repeat yourself" ;) - also there are 3 verses in Matthew but only 2 books

Collectives™ on Stack Overflow

How to change the type of user input? javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related