JavaScript表单值-用变量替换值并计算变量总和

时间:2018-10-06 10:09:14

标签: javascript variables replace

我一直在寻找解决方案,但是找不到我能理解的任何东西。

我正在下面的代码上-为了简化阅读,我简化了输出。

function CreateMsg() { 
var MsgDOM = document.getElementById("MSG"); 

MsgDOM.innerHTML = '<p>calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li>'; 
}

到目前为止,我一切正常,但是我需要进行计算以读取输出显示正在拾取的6个值。

必须读取值,然后从数组中替换该值-同一数组应用于所有六个变量。

因此,输出中每个元素的输出值是许多固定文本值(通常是数字)之一。因此,例如,如果值是1,我希望它用2替换该值。如果是2,然后将其替换为4,以此类推。有大约20个值的字符串,但是它们对于所有六个数字都是通用的需要计算。

然后我希望它采用这六个值并将它们加在一起,然后将它们打印到显示为calculation.value的输出显示中。

2 个答案:

答案 0 :(得分:0)

那应该很容易做到,像这样的东西应该就是您想要的!

function CreateMsg() { 
    var MsgDOM = document.getElementById("MSG");

    let fieldsToRead = ["godview", "lifeview", "level", "emotion", "process", "lessons"];

    let inputArray = fieldsToRead.map((fieldName) => {
        return Number(document.forms[0][fieldName].value);
    });

    console.log(inputArray);

    // This determines how we map input fields to output fields.
    // We can add more elements as needed.
    let inputOutputMap = {
        0:0,1:2,2:4,3:6,4:8,5:10,6:12
    };

    // You can perform your calculations here!!
    let result = inputArray.reduce((total, input) => {
        total += (inputOutputMap[input] || 0);
        return total;
    }, 0); 

    MsgDOM.innerHTML = '<p>Calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li><br><h3>Calculation total: ' + result + '</h3>'; 
}

CreateMsg();
<html>
    <body>
        <form>
          Godview:<br>
          <input type="text" name="godview" value="1"><br>
          Lifeview:<br>
          <input type="text" name="lifeview" value="2"><br>
          Level:<br>
          <input type="text" name="level" value="3"><br>
          Emotion:<br>
          <input type="text" name="emotion" value="4"><br>
          Process:<br>
          <input type="text" name="process" value="5"><br>
          Lessons:<br>
          <input type="text" name="lessons" value="6"><br>
        </form>
        <div>
        <br>
        <br>
        <div id="MSG">
        </div>
    </body>
</html>

答案 1 :(得分:0)

hi
I go through code acording the requirement bellow is the solved code 

can sum the values from the array

<!DOCTYPE HTML>
<html>
<head>

    </head>

<body onload="">
    <form>

        <input type="text" id="godview" value="" />
        <input type="text" id="lifeview" value="" />
        <input type="text" id="level" value="" />
        <input type="text" id="emotion" value="" />
        <input type="text" id="process" value="" />
        <input type="text" id="lessons" value="" />

    </form>
    <div>
        <input type="button" id="btnsend" value="save" onclick="return CreateMsg();" />
    </div>
    <div id="MSG">
       
    </div>
    <script>
        function CreateMsg() {
            var arr = [];
            var godv = document.forms[0].godview.value;
            var lifv = document.forms[0].lifeview.value;
            var levelv = document.forms[0].level.value;
            var emotionv = document.forms[0].emotion.value;
            var processv = document.forms[0].process.value;
            var lessonsv = document.forms[0].lessons.value;
            arr.push(godv);
            arr.push(lifv);
            arr.push(levelv);
            arr.push(emotionv);
            arr.push(processv);
            arr.push(lessonsv);
            alert(arr);
            var MsgDOM = document.getElementById("MSG");
           
            MsgDOM.innerHTML = '<p>calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li>';
        }
    </script>

</body>
</html>