you will understand.Ĭonst paragraphs = document. try commenting this out and see the effect. this is function for removing the old paragraphs created on first input. we define formula to a variable, just so that it's easy to read.ĬreatePara('Area of circle with radius as ', num, formula) ĬreatePara('Circumference of circle with radius as ', num, formula) ĬreatePara('factorial of ', initialNum, num) we are going to make a function for creating a paragraph, appending to body and displaying text.įunction createPara(mymsg, mynum, myformula) ` Append theto using appendChild ().Now, append the text to using appendChild ().Don't use qualified names (like 'html:a') with this method. The nodeName of the created element is initialized with the value of tagName. Create a text node using document.createTextNode (). Syntax createElement(tagName) createElement(tagName, options) Parameters tagName A string that specifies the type of element to be created. Para.textContent = 'You need to enter a number' Ĭonst input = document.querySelector('.input-num') Output: Explanation: Start with creating anelement using document.createElement ().Para.textContent = "factorial of " + initialNum + " is " + num Para.textContent = "Circumference of circle with radius as " + num + " is " + 2 * Math.PI * num Para.textContent = "Area of circle with radius as " + num + " is " + Math.PI * num * num Para.textContent = "cube of " + num + " is " + num * num * num Para.textContent = "square of " + num + " is " + num * num const input = document.querySelector('.input-num') Ĭonst para = document.createElement('p') Please help!!! The code below is working perfectly but is a longer version. I wanted to make a function to create a p element and append it, but the problem i faced was the variable scope. The concept could also be applied to toggle dark and light modes on a website, offering a customizable user experience.Below is my code of longer version and i need a shorter way. Consider a photo gallery where toggling a class alters the layout view, or a “Read More” feature on blog excerpts that expands the content view. You can create rich, interactive experiences across your designs by applying this technique. □ Pro Tip: The power of class toggling extends beyond our demonstration. This creates a clear visual correlation between the button’s appearance and its stated status. This operator checks if the current button’s text is “STOP”, changing it to “GO” if true, and if not, it reverts back to “STOP”. Moreover, the button’s text also toggles between “STOP” and “GO” thanks to a ternary operator. This gives us the visual interplay between the red and green states. red classes are toggled on our button element using classList.toggle(). The buttonPressed function is then defined to react to a click event on this button. In the JavaScript snippet, we first access the button element using its id, "button". Toggling with JavaScriptĬonst button = document.getElementById("button") Į.target.innerText = e.() = "STOP" ? "GO" : "STOP" īutton.addEventListener("click", buttonPressed) These classes will be alternated in JavaScript, affecting the button’s color and the associated user message. The CSS above does two things: it improves the button’s appearance and it defines two state classes –. We initiate our demo with a button element identified by the id “button” and carrying an initial class of red. Your Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets DOWNLOAD NOW Creating the HTML Button
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |