html 计算div中已填充输入的百分比

v9tzhpje  于 2023-05-05  发布在  其他
关注(0)|答案(3)|浏览(97)

有没有一些简单的方法来计算div中填充输入的百分比?
它必须在Javascript中,而不是jQuery。
这是我的HTML代码

<div class="content-menu">                                      
 <ul>
  <li id="tab1"><a id="a1">General</br><p> x % FILLED </p></a></li>
  <li id="tab2"><a id="a2">Contact info</br><p> x % FILLED </p></a></li>
 </ul>
</div> 

<div id="tabs-1">
 <input type="text" name="first_name" />
 <input type="text" name="last_name" />
</div>

....

所以基本上,如果我只输入名字,这是输入的1/2,它应该在li元素中回显50%。
每个选项卡将有不同数量的输入和自己的填充百分比。
只使用Javascript可以吗?
任何帮助将不胜感激,谢谢。

fcg9iug3

fcg9iug31#

最初,您可以获取div中的所有输入字段。你可以看到他们有多少人。之后你可以计算出有多少个值。使用这两个数字,你可以得到你想要的。

// Get the div you want to look in.
var div = document.getElementById("tabs-1");

// Get all the input fields inside your div
var inputs = div.getElementsByTagName('input');

// Get the number of the found inputs.
var totalInputs = inputs.length;

// Loop through them and check which of them has a value.
var inputsWithValue = 0;
for(var i=0; i<totalInputs; i++)
    if(inputs[i].value!=='')
        inputsWithValue +=1;     

// Calculate the percentage.
var filledPercentage = (inputsWithValue/totalInputs)*100;
ehxuflar

ehxuflar2#

这里有一个即时更新的百分比小提琴:http://jsfiddle.net/39xdvo96/1/

<div class="content-menu">
    <ul>
        <li id="tab1"><a id="a1">Percentage<br/><p id="percentage">0%</p></a>

        </li>
    </ul>
</div>
<div id="tabs-1">
    <input type="text" name="first_name" />
    <input type="text" name="last_name" />
</div>

简体中文

var getInputs = document.getElementsByTagName('input');

    for (i = 0; i < getInputs.length; i++) {

        getInputs[i].onkeyup = function () {

            var elem = document.getElementsByTagName('input');
            var vals = [].map.call(elem, function (input) {
                return input.value;
            });

        var filteredvals = vals.filter(function(val) {
        return !(val === "" || typeof val == "undefined" || val === null);
        });

            document.getElementById('percentage').innerHTML = filteredvals.length/(elem.length) * 100 +"%";

        };

}
xfb7svmp

xfb7svmp3#

@Michelangelo回答有一些小问题。缺少i变量的声明,并且百分比计算不正确。这里有一个解决方案。

// calculate percentage od filled inputs
const inputContainer = document.getElementsByClassName('zk-form')[0];
const getInputs = inputContainer.querySelectorAll('input, textarea');

for (let i = 0; i < getInputs.length; i++) {

    getInputs[i].onkeyup = function () {

        let elem = inputContainer.querySelectorAll('input, textarea');
        let vals = [].map.call(elem, function (input) {
            return input.value;
        });

        let filteredvals = vals.filter(function (val) {
            return !(val === "" || typeof val == "undefined" || val === null);
        });
        document.getElementById('zk-submit-percentage').innerHTML = Math.round(filteredvals.length * 100 / (elem.length)) + "%";
    };

}

相关问题