Question

i am trying to output the inserted values in the textboxes when the button(John) is click. At the moment i have just added default values
in here ( John= new Player(30,”England”,3)); but i would like these value to be picked from the textboxes. Please advise how would i go about doing it.
I tried getting the values from textboxes and assigning to variables (x,y,z commented out in script)and passing here ( John= new Player(x,y,z));
but it didn’t seem to work.

Age : <input type = "text" id = "test1" /><br>
County : <input type = "text" id = "test2" /><br>
Rank: <input type = "text" id = "test3" /><br>

<button type="button" onclick="John.myPlayer()">John</button>

<br>

<br>
<div id = "box"></div>
<br>



<script type="text/javascript">

// var x = document.getElementById('test1').value;
// var y = document.getElementById('test2').value;
// var z = document.getElementById('test3').value);

function Player(a,c,r){
this.age=a;
this.country=c;
this.rank=r;
}

Player.prototype.myPlayer = function(){

document.getElementById('box').innerHTML = "John is from " + this.country + " he is       " + this.age + " years old and his rank is " + this.rank;

}

John= new Player(30,"England",3);

John.myPlayer()


</script>

Answer 1

My suggestion is to create a function that is called on the onclick event, and read the values from the textboxes there, after which you create a new instance of Player.

<button type="button" onclick="createNewPlayer()">John</button>

and in javascript:

function createNewPlayer() {

  var x = document.getElementById('test1').value;
  var y = document.getElementById('test2').value;
  var z = document.getElementById('test3').value);

  John= new Player(x, y, z);
  John.myPlayer()
}