More elegant solution needed for repetitive variable use in Javascript-see answer for explanation (tech difficulties with site)

Question

function calculate(){

var targetModifier1=document.getElementById("tm1").value
var obstruction1=0
switch(document.getElementById("obst1").value{
case ("Light Trees"):
obstruction1=1;
break;
case ("Heavy Trees"):
obstruction1=2;
break;
default:
obstruction1=0;
}
var other1=0
switch(document.getElementById("other1").value{
case("jumped"):
other1=1;
break;
case("prone"):
other1=2;
break;
}

var targetModifier2=document.getElementById("tm2").value
var obstruction2=0
switch(document.getElementById("obst2").value{
case ("Light Trees"):
obstruction2=1;
break;
case ("Heavy Trees"):
obstruction2=2;
break;
default:
obstruction2=0;
}
var other2=0
switch(document.getElementById("other2").value{
case("jumped"):
other2=1;
break;
case("prone"):
other2=2;
break;
}

var targetModifier3=document.getElementById("tm3").value
var obstruction3=0
switch(document.getElementById("obst3").value{
case ("Light Trees"):
obstruction3=1;
break;
case ("Heavy Trees"):
obstruction3=2;
break;
default:
obstruction3=0;
}
var other3=0
switch(document.getElementById("other3").value{
case("jumped"):
other3=1;
break;
case("prone"):
other3=2;
break;
}

var targetModifier4=document.getElementById("tm4").value
var obstruction4=0
switch(document.getElementById("obst4").value{
case ("Light Trees"):
obstruction4=1;
break;
case ("Heavy Trees"):
obstruction4=2;
break;
default:
obstruction4=0;
}
var other4=0
switch(document.getElementById("other4").value{
case("jumped"):
other4=1;
break;
case("prone"):
other4=2;
break;
}

var toHit1=tm1+obst1+other1;
var toHit2=tm2+obst2+other2;
var toHit3=tm3+obst3+other3;
var toHit4=tm4+obst4+other4;
}

Answer 1

Mark Niles , please only mark "the best answer" when someone helps you & solution is better than yours.

Answer 2

I understand. Though in that case, it is always a good practice to save your code in code playground and share your code link along with question. So this way you get more space to write more details / description.

Unfortunately, I am not JS expert so cannot help you here.

if you are using app
-> Go to "Create" section
-> tap "+" sign say "New Code"
-> select your code playground
-> write & save your code
-> share your code link here

Answer 3

Ok, so the question asking part of the site wasn't letting me type.

I am building a calculator for a table top game. I need to have 1 function called by an html button (not shown) run the same calculation for 4 different targets using different inputs for each target. The values and options are the same for each target, but the values can end up different based on user input.

For the example in the question, I have simplified the variable declaration, but as you can see, even simplified, the code is lengthy and very repetitive, especially when the only thing changing is the number denoting the variable for the target and the id for the html input elements for each target.

Is there a better, more efficient and neater way to go about this?

Answer 4

D Shah 🎯⏳️-because the question part of the site wasn't letting me type anything and I had to put the question in an answer, and because Sololearn won't let me pin answers, I selected "best answer" for my question to make sure people read it