根据用户选择输入编写html文本
[英]Write html text based on user select inputs
问题描述
I have a html page which draws multiple geometrical figures based on dynamic select user input in a html canvas. 
我有一个html页面，它根据html画布中的动态选择用户输入绘制多个几何图形。
<select id="mySelect" name="Geometrical Figures"><option>Triangle</option>
<select id="cood1" name="Coordinate1"><option>50</option>
<select id="cood2" name="Coordinate2"><option>50</option>
<select id="imgcolor" name="ImageColour"><option>Red</option>
<select id="linewidth" name="Linewidth"><option>5</option>
<button class="button" id="imagedraw" onclick="draw()">Draw Image</button>
Now when I click on the button, I want to show the selected details in a text 现在当我点击按钮时，我想在文本中显示所选的详细信息
Example text 示例文本
A triangle has been drawn with starting coordinates (50,50), colour red, line-width 10. 绘制了一个三角形，起始坐标（50,50），红色，线宽10。
Note: The text should appear only on button click only. 注意：文本应仅在按钮单击时出现。
3 个解决方案
解决方案1
0 已采纳 2016-04-25 08:41:29
Add the following to your onClick function. 将以下内容添加到onClick函数中。 Also create an element with id details (or anything you want but it needs to correspond to the first selector in the function) 还要创建一个带有id details的元素（或任何你想要的但它需要与函数中的第一个选择器对应）
function onClick(){
...//your current code
document.getElementById("details").innerHTML = "A triangle has been drawn with starting coordinates ("+document.getElementById("cood1").value+","+document.getElementById("cood2").value+") , colour "+document.getElementById("imgcolor").value+", linewidth "+document.getElementById("linewidth").value+".";
}
解决方案2
0 2016-04-25 08:56:31
Try this 尝试这个
function draw() { document.getElementById("result").textContent = "Geometrical Figures:- " + document.getElementById("mySelect").value + ", Color:- " + document.getElementById("imgcolor").value }
<html> <head> </head> <select id="mySelect" name="Geometrical Figures"> <option>Triangle</option> </select> <select id="imgcolor" name="ImageColour"><option>Red</option> </select> <input type="button" onclick="draw()" value="Draw"/> <h3 id="result"></h3> </html>
解决方案3
0 2016-04-25 09:51:18
<html>
<head>
<script>
function draw(){
var myselect = document.getElementById('mySelect').value;
var cood1=document.getElementById('cood1').value;
var cood2=document.getElementById('cood2').value;
var imgcolor=document.getElementById('imgcolor').value;
var lnwidth =document.getElementById('linewidth').value;
var myc = document.getElementById('myCanvas');
var convas= myc.getContext('2d');
convas.beginPath();
convas.linewidth=lnwidth;
convas.fillStyle="#FF0000";
convas.moveTo(cood1, cood2);
convas.lineTo(50, 100);
convas.lineTo(70, 100);
convas.closePath();
convas.fill();
document.getElementById('textID').innerHTML = 'Shape Parameters are :'+myselect+" , Coordinates are :"+"("+cood1+","+cood2+")"+"Image color : "+imgcolor +"line width is : "+lnwidth;
}
</script>
</head>
<body>
<br>
<select id="mySelect" name="Geometrical Figures"><option>Triangle</option></select>
<select id="cood1" name="Coordinate1"><option>50</option> </select>
<select id="cood2" name="Coordinate2"><option>50</option></select>
<select id="imgcolor" name="ImageColour"><option>Red</option></select>
<select id="linewidth" name="Linewidth"><option>5</option></select>
<button class="button" id="imagedraw" onclick="draw()">Draw Image</button>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<div id='text ID'></div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.