Amina Malik Amina Malik - 16 days ago 4
HTML Question

javascript/jquery for displaying auto generated different sentence

I am looking for javascript/jquery that will replace a line with the new one.... like there is an inputbox to enter name and a button that insert name within a line and display innerHTml output...



function changeResult(){

var name = document.getElementById('student_name').value;
document.getElementById('example').innerHTML = name + ', is a brilliant student';
}

<div align="center">

<input id="student_name" name="name" type="text" value="" size="50"placeholder="Please enter name here" />

<input id="Student_result" name="s-result" type="button" value="Result" onClick="changeResult();" class="myButton"/>
</div>


<div id="example" align="justify">
Henry is a good student.
</div>





For such purpose i Used attached script.... Now i need to make changes like when i click on button to insert name it'll generate a line and when i click it again it generate different line and so on......
Hope anyone help me...

Answer

you need an Array, a list of sentences that you want

var random_sentences = [
  "is a brilliant student",
  "is a full student",
  "is a rude student",
  "is a fat student",
  "is not a student"
 ];

function changeResult(){
  var random_sentence_id = Math.round(Math.random()*(random_sentences.length-1));
  var name = document.getElementById('student_name').value;
  document.getElementById('example').innerHTML = name + ', ' + random_sentences[random_sentence_id];
}
<div align="center">

<input id="student_name" name="name" type="text" value="" size="50"placeholder="Please enter name here" />

<input id="Student_result" name="s-result" type="button" value="Result" onClick="changeResult();" class="myButton"/>
</div>


<div id="example" align="justify">
Henry is a good student.
</div>