how to connect html button to javascript function?
Question
i recently started to do web programming. i got a task that using javascript.
what i'm trying to do is that i type some text in texture and if i press a button, it makes text size changed so
1) type text in textarea
2) press a button
3) a button calls javascript function from javascript file
4) function changes text size and returns it to somewhere(?)
5) size-changed text is displayed in texture
i think i did 1~3 but not 100% sure
this is my code :
function doFunction() { var txt = document.getElementById("txt").value; var result = txt.fontsize(24); }
<h1>Pimp My Text</h1> <div> <img src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" /> </div> <fieldset> <legend>Text</legend> <textarea rows ="3" cols= "30" id="txt"> </textarea> </fieldset> <fieldset> <legend>Pimpification</legend> <input type="button" value="Bigger pimpin!" onclick="doFunction();"/ </br> <input type="checkbox" name="Bling" />Bling </fieldset>
4 answers
solution1
0 2016-10-07 08:33:12
First give your text are some default font-size with CSS:
#txt {
font-size: 10px;
}
Then call this function each time your button is clicked.
Javascript without JQuery:
function increaseTextSize() {
document.getElementById("#txt").style.fontSize = "30px";
}
Javascript using JQuery:
function increaseTextSize() {
$("#txt").css("font-size", "30px");
}
HTML changes required
Change
onclick="doFunction();"
to
onclick="increaseTextSize();"
Code Snippet -
function increaseTextSize() { document.getElementById("txt").style.fontSize = "30px"; }
<body> <h1>Pimp My Text</h1> <div> <img src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" /> </div> <fieldset> <legend>Text</legend> <textarea rows ="3" cols= "30" id="txt"> </textarea> </fieldset> <fieldset> <legend>Pimpification</legend> <input type="button" value="Bigger pimpin!" onclick="increaseTextSize();"/ </br> <input type="checkbox" name="Bling" />Bling </fieldset> </body>
solution2
0 2016-10-07 08:39:23
If you want to update TextArea text size from it number input you can update your JS function to:
function doFunction() {
var txt = document.getElementById("txt").value;
document.getElementById("txt").style.fontSize = txt.trim() + "px";
}
solution3
0 ACCPTED 2016-10-07 08:46:38
You can use javascript for this to increase the font size. You can change the font size value to you preferred value.
<body> <h1>Pimp My Text</h1> <div> <img src="http://www.cs.washington.edu/education/courses/190m/09sp/labs/5-pimpify/pimpin.jpg" alt="Marty Stepp, pimpin' it!" /> </div> <fieldset> <legend>Text</legend> <textarea rows ="3" cols= "30" id="txt"> </textarea> </fieldset> <fieldset> <legend>Pimpification</legend> <input type="button" value="Bigger pimpin!" onclick="doFunction();"/> <br/> <input type="checkbox" name="Bling" />Bling </fieldset> <script> function doFunction() { document.getElementById("txt").style.fontSize = "30px"; } </script> </body>
solution4
0 2016-10-07 08:48:53
A 2D scaling transformation enables you to resize an element. To perform a 2D scaling transformation.
The following CSS rule scales a <div> element with the class scale1. The element is 30 percent larger in all dimensions:
div.scale1 { transform: scale(1.3); }
Then use JavaScript to add the class attribute 'scale1' to the element
elementName.classList.add("scale1");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.