<strong>Attributes:</strong><br>

    <div style="display:inline-block">
        <label>Prey: </label><input type="number" class = "input" id="preyBox" value="1.1" step="0.1" style="display:inline-block; width: 20%;"/>
    </div> <br>
    <div style="display:inline-block">
        <label>Predator: </label><input type="number" class = "input" id="predBox" value="0.4" step="0.1" style="display:inline-block; width: 20%;"/>
    </div> <br>

    <div style="display:inline-block">
        <label>Time: </label><input type="number" class = "input" id="timeBox" min = "0" value="10" style="display:inline-block; width: 20%;"/>
    </div> <br>

    <div style="display:inline-block">
    <label>r: 0</label><input type="range" class = "input" id="rRange" value = "1.3" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div><br>
    <div style="display:inline-block">
    <label>u: 0</label><input type="range" class = "input" id="uRange" value = "0.7" min="0" max="1" step="0.1" style="width:20%"/><label>1</label>
    </div><br>
    <div style="display:inline-block">
    <label>K: 0</label><input type="range" class = "input" id="KRange" value = "1" min="0" max="100" style="width:20%"/><label>100</label>
    </div><br>
    <div style="display:inline-block">
    <label>s: 0</label><input type="range" class = "input" id="sRange" value = "0.5" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div><br>
    <div style="display:inline-block">
    <label>v: 0</label><input type="range" class = "input" id="vRange" value = "1.6" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div>

var elements = document.getElementsByClassName("input");
for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener("change", updateGraph);
}

var x = {'vector': new Array()}
var y = {
  'preyVector': new Array(),
  'predVector': new Array(),
}

function valueOf(element){
    return parseFloat(document.getElementById(element).value)
}
function adjustX(){
  x.vector = new Array()
    for(var i = 0; i < valueOf("timeBox"); i++){
        x.vector[i] = i
    }
}
function adjustYPrey(){
  y.preyVector = new Array()
    y.preyVector[0] = valueOf("preyBox")
    for(var i = 0; i < x.vector.length - 1; i++){
        //y.preyVector[i+1] = parseFloat(y.preyVector[i]) * (1+(valueOf("rRange")*(1-(parseFloat(y.preyVector[i])/valueOf("KRange"))))) - (valueOf("sRange") * parseFloat(y.preyVector[i]) * parseFloat(y.predVector[i]))
    y.preyVector[i+1] = y.preyVector[i] * (1+valueOf("rRange")*(1-y.preyVector[i]/valueOf("KRange"))) - valueOf("sRange")*y.preyVector[i]*y.predVector[i]
    console.log(y.preyVector[i+1])
    if(isNaN(y.preyVector[i+1])) {
      console.log("something fishy here")
    }
    }

}
function adjustYPred(){
  y.predVector = new Array()
    y.predVector[0] = valueOf("predBox");
    for(var i = 0; i < x.vector.length - 1; i++){
        y.predVector[i+1] = (1-valueOf("uRange"))*y.predVector[i] + valueOf("vRange")*y.predVector[i] * y.preyVector[i]

    }
}

x = []
for i in range(10):
    x.append(i)
preyInitial = 1.1
predInitial = 0.4

prey = [None]*len(x)
pred = [None]*len(x)

r = 1.3
u = 0.7
K = 1
s = 0.5
v = 1.6

prey[0] = preyInitial
pred[0] = predInitial

def plot():
  for i in range(len(x)-1):
    prey[i + 1] = prey[i] * (1+r*(1-prey[i]/K)) - s*prey[i]*pred[i]
    pred[i + 1] = (1-u)*pred[i] + v*prey[i]*pred[i]

  print("Prey data:n", prey[:])
  print("Predator data:n", pred[:])

plot()