JavaScript-如何用几行写出来？

问题描述

我正在尝试学习JS。几个小时以来，我一直在努力将事物连接到数组，然后添加函数，我希望它与.forEach blabla一起使用。.Kinda放弃了这一点，使它变得更长，更不复杂，这是我真正不喜欢的最简单的方法。如果您能给我一些如何写得更短的提示，我将不胜感激。

function calc() {
    var hp = document.getElementById("hpMob").value;
    var hpz = "potwor posiada: " + document.getElementById("hpMob").value;
    var a = "Flame dmg: " + (hp * 0.05) * document.getElementById("resFire").value /100;
    var b = "Freeze dmg: " + (hp * 0.05) *document.getElementById("resIce").value /100;
    var c = "Divine dmg: " + (hp * 0.05) * document.getElementById("resHoly").value /100;
    var d = "Zap dmg: " + (hp * 0.05) * document.getElementById("resEnergy").value /100;
    var e = "Wound dmg: " + (hp * 0.05) * document.getElementById("resPhysic").value /100;
    var f = "Poison dmg: " + (hp * 0.05) * document.getElementById("resEarth").value /100;
    var g = "Curse dmg: " + (hp * 0.05) * document.getElementById("resDeath").value /100;
    /* var allId = 
      document.getElementById("resFire").value;
    +  document.getElementById("resIce").value;
    +  document.getElementById("resHoly").value;
    +  document.getElementById("resEnergy").value;
    +  document.getElementById("resPhysic").value;
    +  document.getElementById("resEarth").value;
    +  document.getElementById("resDeath").value;
    */

    // var lista = [a,b,c,d,e,f,g];

    var tekstPisany = hpz + "<br>" + a + "<br>" + b + "<br>" + c + "<br>" + d + "<br>" + e + "<br>"+ f + "<br>" + g + "<br>";

  
    document.getElementById("result").innerHTML = tekstPisany;
};

    <form>  <center>
        HP Moba: <input type="text" class="hp" id="hpMob"><br /><br />

        Fire:   <input type="text" class="x" id="resFire"> <br />
        Ice:    <input type="text" class="x" id="resIce"> <br />
        Holy:   <input type="text" class="x" id="resHoly"> <br />
        Energy: <input type="text" class="x" id="resEnergy"> <br />
        Physic: <input type="text" class="x" id="resPhysic"> <br />
        Earth:  <input type="text" class="x" id="resEarth"> <br />
        Death:  <input type="text" class="x" id="resDeath"> <br />

        <button type="button" onclick="calc()">Oblicz</button>
    </form>

    <p id="result"></p>
</center>

几天前我真的想工作的超级额外代码：

var button = document.getElementById("button");
function click(){
    document.getElementById("content").innerHTML = calc();
};

const final1 = [
    "Flame","Wound","Poison","Freeze","Curse","Divine","Zap",];


function calc() {
    var wynik = document.getElementById("mobHp") * 0.05 * document.getElementsByTagName("textarea").value / 100
    
        if (document.getElementsByTagName("textarea").value === 0){
            return "Potwor posiada calkowita odpornosc na ",final1;
        }
        if (document.getElementsByTagName("textarea").value === 100) {
            return "Neutralny na ",final1,",otrzyma ",wynik," obrazen.";
        }
        if (document.getElementsByTagName("textarea").value > 100){
            return "Wrazliwy na ",otrzyma"," obrazen.";
        }
        if ((document.getElementsByTagName("textarea").value < 100) || (document.getElementsByTagName("textarea").value > -100)){
            return "Czesciowo odporny na "," obrazen.";
        }
        else {
            return "Nie poDales normalnych wartosci.";
        }
    
    
    
};

解决方法

这段代码似乎可以正常工作，并且是一种更干净的替代方法。

工作原理：

创建类的HTMLCollection对象
创建一个名称为props的数组
遍历HTMLCollection。
不通过任何乘法（通过if语句）将希思添加到数组中
将其他元素以帖子中指定的格式推入数组
最后，将数组添加到result的innerHTML中，并用换行符<br />联接它们

希望这对您有所帮助！请记住，我未添加任何输入检查，如果未指定运行状况，则该代码可能无法正常工作。希望这可以为您提供良好的改进基础。

function calc() {
  const fields = document.getElementsByClassName("x");
  const props = [];
  
  for (let i = 0; i < fields.length; i++) {
    if (fields.item(i).id === "Potwor posiada") {
      props.push(`${fields.item(i).id}: ${fields.item(i).value}`);
    } else {
      props.push(`${fields.item(i).id} dmg: ${(a[0] * fields.item(i).value) / 100}`);
    }
  }
  document.getElementById("result").innerHTML = props.join("<br />");
};

<form>  <center>
        HP Moba: <input type="text" class="x" id="Potwor posiada"/><br /><br />
        Fire:   <input type="text" class="x" id="Flame"/> <br />
        Ice:    <input type="text" class="x" id="Freeze"/> <br />
        Holy:   <input type="text" class="x" id="Divine"/> <br />
        Energy: <input type="text" class="x" id="Zap"/> <br />
        Physic: <input type="text" class="x" id="Wound"/> <br />
        Earth:  <input type="text" class="x" id="Poison"/> <br />
        Death:  <input type="text" class="x" id="Curse"/> <br />

        <button type="button" onclick="calc()">Oblicz</button>
    </form>

    <p id="result"></p>
</center>

创建一个具有键值对的列表，其中包含输入元素的id作为键，值包含作为文本的文本，以显示和循环该列表。

下面是代码：

<form>  <center>
        HP Moba: <input type="text" class="hp" id="hpMob"><br /><br />

        Fire:   <input type="text" class="x" id="resFire"> <br />
        Ice:    <input type="text" class="x" id="resIce"> <br />
        Holy:   <input type="text" class="x" id="resHoly"> <br />
        Energy: <input type="text" class="x" id="resEnergy"> <br />
        Physic: <input type="text" class="x" id="resPhysic"> <br />
        Earth:  <input type="text" class="x" id="resEarth"> <br />
        Death:  <input type="text" class="x" id="resDeath"> <br />

        <button type="button" onclick="calc()">Oblicz</button>
    </form>

    <p id="result"></p>
</center>

package net.javavatutorial.tutorials;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@Controller
@SpringBootApplication
public class SpringBootExampleApplication {

    @RequestMapping("/file")
    @ResponseBody
    public String home(@RequestParam("filepath") String filepath) { 
        return Filewalk.filewalk(filepath);
    }

    public static void main(String[] args) {
        SpringApplication.run(SpringBootExampleApplication.class,args);
    }
}

因此，您可以做的是使用要遍历的所有内容制作数组，以便可以重用数组“ lista”，然后创建另一个将具有HTML元素的所有ID的数组，并然后为添加的这些短信创建另一个数组。然后，您将必须进行三层嵌套循环才能遍历所有数组，但是老实说，我认为这样做不值得。如果我是你，我会保留这种方式，因为它比带有单独数组的嵌套循环更具可读性。

不过，我可以用您的代码给您2条提示：

避免使用var。它已被弃用，并可能破坏函数和其他变量的作用域。
在此附加代码中，您未返回字符串。在第一个if语句中，您将具有以下内容：
```
 return "Potwor posiada calkowita odpornosc na ",final1;
```

据我了解，final1是一个数组。指向要返回的数组元素。另外，在返回值中使用+的{{1}} insead。因此，如果您想退回对火焰有抵抗力的怪物，则应采用以下方式退回它：

我希望这会有所帮助。来自另一个波兰人的问候:) Pozdro！

html javascript