If .. Then in javascript

-3

我想根据当前字体大小更改文本的字体大小。If .. Then in javascript

算法：在单击文本
，
如果font size = 35，将其更改为12
否则如果font size = 12，将其更改为35

<h2>What Can JavaScript Do?</h2> 
 
<p id="demo" onclick="myFunction()">Click me.</p> 
 

 
<script> 
 
    function myFunction() { 
 
     if (document.getElementById('demo').style.fontSize='35px') { 
 
     document.getElementById('demo').style.fontSize='12px' 
 
     } else if(document.getElementById('demo').style.fontSize='12px') { 
 
     document.getElementById('demo').style.fontSize='35x' 
 
     } 
 
    } 
 
</script>

它改变了它12，但从未改回到35.我在这里错过了什么？

来源

2017-09-25 Subaz

injavascript（和许多其他语言）'='是赋值，你正在寻找的是''==（甚至''===在JavaScript）来测试为平等 –

好吧，但为什么在我的问题有这么多downvotes大声笑 – Subaz

@Subaz：可能是因为它是你期望读一些基本的JavaScript教程（这将涵盖）。 http://eloquentjavascript.net/01_values.html#h_5G7gD95A6V –

您在if声明中有任务。您需要使用不是=，而是==或更好===。

另外一个音符，如果font-size在css定义，它可能会返回给你一个空字符串的第一次。在这种情况下，您需要使用window.getComputedStyle来获取font-size。

function myFunction() { 
 
     const element = document.getElementById('demo'); 
 
     console.log(element.style.fontSize); 
 
     const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size'); 
 

 
     if (fontSize === '35px') { 
 
     element.style.fontSize = '12px'; 
 
     } else if(fontSize === '12px') { 
 
     element.style.fontSize = '35px'; 
 
     } 
 
}

p#demo { 
 
    font-size: 12px; 
 
}

<h2>What Can JavaScript Do?</h2> 
 
<p id="demo" onclick="myFunction()">Click me.</p>

来源

2017-09-25 05:21:50

-1

它到底是什么苏伦Srapyan说，但这里是正确的代码：

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    <h2>What Can JavaScript Do?</h2> 
 

 
    <p id="demo" onclick="myFunction()">Click me.</p> 
 

 
    <script> 
 
    function myFunction() { 
 
     if (document.getElementById('demo').style.fontSize === '35px') { 
 
     document.getElementById('demo').style.fontSize='12px' 
 
     } else if(document.getElementById('demo').style.fontSize ==='12px') { 
 
     document.getElementById('demo').style.fontSize='35x' 
 
     } 
 

 
    } 
 
    
 
    </script> 
 
    </body> 
 
    </html>

来源

2017-09-25 05:24:20

顺便做一个变量并存储元素，这样你就不必每次都输入它：'var demo = document.getElementById（“demo”）;'并且使用'demo'做任何事情。希望这有助于：P –

上面的代码不起作用。你在jsfiddle中试过了吗？ –

你在if statement使用=像if(a=b)。当此代码将运行javascript engine将分配b到a。这就是为什么它会始终在if(a=b)块内执行相同的代码。这就是如何，这将被翻译成机器语言。如果您想要比较b/w a and b，则应使用a==b或a===b。这将使所需的程序块根据指定的条件执行。

来源

2017-09-25 05:27:23

@Downvoter，寻找你的decsription –

您正在使用'='而不是'=='，另一件重要的事情 - 您应该将字体大小存储在变量中，然后进行比较。

优化的代码将是 -

<!DOCTYPE html> 
    <html> 
    <body> 
    <h2>What Can JavaScript Do?</h2> 

    <p id="demo" onclick="myFunction()">Click me.</p> 

    <script> 
    function myFunction() { 
     var element= document.getElementById('demo'), 
      fontSize=element.style.fontSize; 

     if (fontSize === '35px') { 
     element.style.fontSize='12px' 
     } else if(fontSize ==='12px') { 
     element.style.fontSize='35x' 
     } 

    } 

    </script> 
    </body> 
    </html>

来源

2017-09-25 05:29:40

相反，你要分配大小字体大小的比较。

document.getElementById('demo').style.fontSize='35px'

您应将其更改为以下：

document.getElementById('demo').style.fontSize=='35px'

两者相同的条件。

来源

2017-09-25 05:30:11

从你的最后三个错误。第一个是你的html标记中没有任何style标记。第二个是您输入为=的条件运算符==。最后一个错误是在下面的第二个条件中错别字35x应该是35px。

<p id="demo" style="font-size:35px;" onclick="myFunction()">Click me.</p> 

if (document.getElementById('demo').style.fontSize=='35px') { 
    document.getElementById('demo').style.fontSize='12px'; 
    } else if(document.getElementById('demo').style.fontSize=='12px') { 
    document.getElementById('demo').style.fontSize='35px'; 
    }

DEMO

来源

2017-09-25 05:30:58

Try This : 
    <!DOCTYPE html> 
    <html> 
    <body> 
    <h2>What Can JavaScript Do?</h2> 

    <p id="demo" onclick="myFunction()">Click me.</p> 

    <script> 
    function myFunction() { 

    var el = document.getElementById('demo'); 
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); 
    var fontSize = parseFloat(style); 
     if (fontSize==16) { 
     document.getElementById('demo').style.fontSize='12px'; 
     } else if(fontSize==12) { 
     document.getElementById('demo').style.fontSize='35px'; 
     } 

    } 

    </script> 
    </body> 
    </html>

来源

2017-09-25 05:39:05

If .. Then in javascript

回答

相关问题