文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过javascript根据值更改文本的颜色

问如何通过javascript根据值更改文本的颜色
EN

Stack Overflow用户

提问于 2021-03-31 16:08:03

回答 2查看 55关注 0票数 0

我正在尝试根据“电压降”值更改文本的颜色。理想情况下，我希望电压降高于3%时为红色，如果电压降较低时为绿色。

这是我目前的HTML：

function printAnswer() {
    var volts = document.getElementsByName("voltDrop_volts")[0].value;
    var amps = document.getElementsByName("voltDrop_amps")[0].value;
    var length = parseFloat(document.getElementsByName("voltDrop_m")[0].value);
    var cableSize = parseFloat(document.getElementsByName("voltDrop_cableSize")[0].value);
    var ohm = 0;
    var reactance = 0;
    if (cableSize === 630) {
        ohm = 0.0418;
        reactance = 0.08;
    } else if (cableSize === 500) {
        ohm = 0.0506, reactance = 0.082;
    } else if (cableSize === 400) {
        ohm = 0.062;
        reactance = 0.0829;
    } else if (cableSize === 300) {
        ohm = 0.077;
        reactance = 0.0839;
    } else if (cableSize === 240) {
        ohm = 0.0948;
        reactance = 0.0847;
    } else if (cableSize === 185) {
        ohm = 0.123;
        reactance = 0.0862;
    } else if (cableSize === 150) {
        ohm = 0.153;
        reactance = 0.0868;
    } else if (cableSize === 120) {
        ohm = 0.188;
        reactance = 0.087;
    } else if (cableSize === 95) {
        ohm = 0.236;
        reactance = 0.0904;
    } else if (cableSize === 70) {
        ohm = 0.327;
        reactance = 0.0917;
    } else if (cableSize === 50) {
        ohm = 0.471;
        reactance = 0.0962;
    } else if (cableSize === 35) {
        ohm = 0.638;
        reactance = 0.101;
    } else if (cableSize === 25) {
        ohm = 0.884;
        reactance = 0.106;
    } else if (cableSize === 16) {
        ohm = 1.4;
        reactance = 0.111;
    } else if (cableSize === 10) {
        ohm = 2.23;
        reactance = 0.118;
    } else if (cableSize === 6) {
        ohm = 3.75;
        reactance = 0.128;
    } else if (cableSize === 4) {
        ohm = 5.61;
        reactance = 0.137;
    } else if (cableSize === 2.5) {
        ohm = 9.01;
        reactance = 0.143;
    } else if (cableSize === 1.5) {
        ohm = 16.5;
        reactance = 0.157;
    } else {
        msg = "Error";
    }
    var reactanceT = (reactance * length) / 1000;
    var ohmT = (ohm * length) / 1000;

    if (volts < 400) {
        var vDrop = ((ohm * 2) * (length / 1000) * amps);
    } else {
        var vDrop = (Math.sqrt(3)) * amps * (Math.sqrt((Math.pow(ohmT, 2)) + (Math.pow(reactanceT, 2))));
    }


    var vFinal = (volts - vDrop);
    var vDropPercent = ((vDrop / volts) * 100);
    console.log(volts, amps, length, cableSize, ohm);
    document.getElementById("vFinal").innerHTML = vFinal.toFixed(2);
    document.getElementById("vDrop").innerHTML = vDrop.toFixed(2);
    document.getElementById("vDropPercent").innerHTML = vDropPercent.toFixed(2);
    document.getElementById("resistanceCheck").innerHTML = ohmT.toFixed(4);
    document.getElementById("reactanceCheck").innerHTML = reactanceT.toFixed(4);
    
    if (vDropPercent > 3) {

        document.getElementsByName("results-box1").style.color = 'red';
    } else {
        document.getElementsByName("results-box1").style.color = 'green';
    }

}

<p>Final Voltage (V)</p>
                <div class="results-box">
                    <p id="vFinal" style="margin: 10px 0;">&nbsp;</p>
                </div>

                <p>Voltage Drop (V)</p>
                <div class="results-box">
                    <p id="vDrop" style="margin: 10px 0;">&nbsp;</p>
                </div>

                <p>Voltage Drop (%)</p>
                <div class="results-box1">
                    <p id="vDropPercent" style="margin: 10px 0;"></p>
                </div>

和我的javascript：

function printAnswer() {
    var volts = document.getElementsByName("voltDrop_volts")[0].value;
    var amps = document.getElementsByName("voltDrop_amps")[0].value;
    var length = parseFloat(document.getElementsByName("voltDrop_m")[0].value);
    var cableSize = parseFloat(document.getElementsByName("voltDrop_cableSize")[0].value);
    var ohm = 0;
    var reactance = 0;
    if (cableSize === 630) {
        ohm = 0.0418;
        reactance = 0.08;
    } else if (cableSize === 500) {
        ohm = 0.0506, reactance = 0.082;
    } else if (cableSize === 400) {
        ohm = 0.062;
        reactance = 0.0829;
    } else if (cableSize === 300) {
        ohm = 0.077;
        reactance = 0.0839;
    } else if (cableSize === 240) {
        ohm = 0.0948;
        reactance = 0.0847;
    } else if (cableSize === 185) {
        ohm = 0.123;
        reactance = 0.0862;
    } else if (cableSize === 150) {
        ohm = 0.153;
        reactance = 0.0868;
    } else if (cableSize === 120) {
        ohm = 0.188;
        reactance = 0.087;
    } else if (cableSize === 95) {
        ohm = 0.236;
        reactance = 0.0904;
    } else if (cableSize === 70) {
        ohm = 0.327;
        reactance = 0.0917;
    } else if (cableSize === 50) {
        ohm = 0.471;
        reactance = 0.0962;
    } else if (cableSize === 35) {
        ohm = 0.638;
        reactance = 0.101;
    } else if (cableSize === 25) {
        ohm = 0.884;
        reactance = 0.106;
    } else if (cableSize === 16) {
        ohm = 1.4;
        reactance = 0.111;
    } else if (cableSize === 10) {
        ohm = 2.23;
        reactance = 0.118;
    } else if (cableSize === 6) {
        ohm = 3.75;
        reactance = 0.128;
    } else if (cableSize === 4) {
        ohm = 5.61;
        reactance = 0.137;
    } else if (cableSize === 2.5) {
        ohm = 9.01;
        reactance = 0.143;
    } else if (cableSize === 1.5) {
        ohm = 16.5;
        reactance = 0.157;
    } else {
        msg = "Error";
    }
    var reactanceT = (reactance * length) / 1000;
    var ohmT = (ohm * length) / 1000;

    if (volts < 400) {
        var vDrop = ((ohm * 2) * (length / 1000) * amps);
    } else {
        var vDrop = (Math.sqrt(3)) * amps * (Math.sqrt((Math.pow(ohmT, 2)) + (Math.pow(reactanceT, 2))));
    }


    var vFinal = (volts - vDrop);
    var vDropPercent = ((vDrop / volts) * 100);
    console.log(volts, amps, length, cableSize, ohm);
    document.getElementById("vFinal").innerHTML = vFinal.toFixed(2);
    document.getElementById("vDrop").innerHTML = vDrop.toFixed(2);
    document.getElementById("vDropPercent").innerHTML = vDropPercent.toFixed(2);
    document.getElementById("resistanceCheck").innerHTML = ohmT.toFixed(4);
    document.getElementById("reactanceCheck").innerHTML = reactanceT.toFixed(4);
    
    if (vDropPercent > 3) {

        document.getElementsByName("results-box1").style.color = 'red';
    } else {
        document.getElementsByName("results-box1").style.color = 'green';
    }

}

我在这里看过类似的线程，并应用了我找到的东西，但是我不能让它工作。JS代码的最后四行是我试图根据值更改颜色的地方，但是无论我如何努力，它都不起作用。

javascript

html

css

colors

回答 2

Stack Overflow用户

发布于 2021-03-31 16:15:27

有几个错误：

document.getElementsByName("results-box1")应为document.getElementsByClassName("results-box1") (在HTML语言中，results-box1是为属性class设置的值，而不是为name)
document.getElementsByClassName("results-box1")返回集合的属性设置的值，因此它没有style.color属性。

潜在的解决方案：

使用带document.querySelector(".results-box1").style.color的document.getElementsByClassName("results-box1")[0].style.color

replace document.getElementsByName("results-box1").style.color替换
document.getElementsByName("results-box1").style.color

票数 -1

Stack Overflow用户

发布于 2021-03-31 16:15:10

document.getElementsByName返回一个元素集合。改为使用document.getElementsByName("results-box1")[0]来选择返回集合的第一个元素(假设第一个元素是您想要更改样式的元素)。因此，将您的代码更改为

if (vDropPercent > 3) {
  document.getElementsByName("results-box1")[0].style.color = 'red';
} else {
  document.getElementsByName("results-box1")[0].style.color = 'green';
}

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66883965

复制

相似问题

问如何通过javascript根据值更改文本的颜色
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过javascript根据值更改文本的颜色EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过javascript根据值更改文本的颜色
EN