如何将html按钮连接到javascript函数？
[英]how to connect html button to javascript function?
问题描述
i recently started to do web programming. 
我最近开始做网络编程。 i got a task that using javascript. 我有一个使用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 1）在textarea中键入文本
2) press a button 2）按一下按钮
3) a button calls javascript function from javascript file 3）一个按钮从javascript文件调用javascript函数
4) function changes text size and returns it to somewhere(?) 4）函数改变文本大小并将其返回到某处（？）
5) size-changed text is displayed in texture 5）尺寸改变的文本显示在纹理中
i think i did 1~3 but not 100% sure 我想我做了1~3但不是100％肯定
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 个解决方案
解决方案1
0 2016-10-07 08:33:12
First give your text are some default font-size with CSS: 首先给你的文字是一些CSS的默认字体大小：
#txt {
font-size: 10px;
}
Then call this function each time your button is clicked. 然后在每次单击按钮时调用此函数。
Javascript without JQuery: 没有 JQuery的Javascript：
function increaseTextSize() {
document.getElementById("#txt").style.fontSize = "30px";
}
Javascript using JQuery: 使用JQuery的Javascript：
function increaseTextSize() {
$("#txt").css("font-size", "30px");
}
HTML changes required 需要HTML更改
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>
解决方案2
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: 如果要从数字输入更新TextArea文本大小，可以将JS函数更新为：
function doFunction() {
var txt = document.getElementById("txt").value;
document.getElementById("txt").style.fontSize = txt.trim() + "px";
}
解决方案3
0 已采纳 2016-10-07 08:46:38
You can use javascript for this to increase the font size. 您可以使用javascript来增加字体大小。 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>
解决方案4
0 2016-10-07 08:48:53
A 2D scaling transformation enables you to resize an element. 2D缩放转换使您可以调整元素的大小。 To perform a 2D scaling transformation. 执行2D缩放转换。
The following CSS rule scales a <div> element with the class scale1. 以下CSS规则使用class scale1缩放<div>元素。 The element is 30 percent larger in all dimensions: 所有尺寸的元素都大30％：
div.scale1 { transform: scale(1.3); div.scale1 {transform：scale（1.3）; } }
Then use JavaScript to add the class attribute 'scale1' to the element 然后使用JavaScript将类属性“scale1”添加到元素中
elementName.classList.add("scale1"); elementName.classList.add（ “量程1”）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.