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

回答

相關問題