Javascript 基于用户选择输入编写html文本_Javascript_Html

Javascript 基于用户选择输入编写html文本

javascript html

Javascript 基于用户选择输入编写html文本,javascript,html,Javascript,Html,我有一个html页面，它根据html画布中的动态选择用户输入绘制多个几何图形 <select id="mySelect" name="Geometrical Figures"><option>Triangle</option> <select id="cood1" name="Coordinate1"><option>50</option> <select id="cood2" name="Coordinate

我有一个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>

三角形
50
50
红色
5.
画图

现在，当我单击按钮时，我想在文本中显示所选的详细信息

示例文本

绘制了一个三角形，起始坐标为（50,50），颜色为红色，线宽为10

注意：文本应仅在按钮单击时显示。

将以下内容添加到

onClick

功能中。还创建一个id为

详细信息的元素（或任何您想要的元素，但它需要与函数中的第一个选择器相对应）
将以下内容添加到onClick
函数中。还创建一个id为详细信息的元素（或任何您想要的元素，但它需要与函数中的第一个选择器相对应）
试试这个

函数绘图（）{
document.getElementById（“结果”）.textContent=“几何图形：-”+document.getElementById（“mySelect”）.value+”，颜色：-“+document.getElementById（“imgcolor”）.value
}

三角
红色
试试这个

函数绘图（）{
document.getElementById（“结果”）.textContent=“几何图形：-”+document.getElementById（“mySelect”）.value+”，颜色：-“+document.getElementById（“imgcolor”）.value
}

三角
红色

函数绘图（）{
var myselect=document.getElementById（'myselect'）.value；
var cood1=document.getElementById（'cood1'）。值；
var cood2=document.getElementById（'cood2'）.value；
var imgcolor=document.getElementById（'imgcolor'）.value；
var lnwidth=document.getElementById（'linewidth'）。值；
var myc=document.getElementById（'myCanvas'）；
var convas=myc.getContext（'2d'）；
convas.beginPath（）；
convas.linewidth=lnwidth；
convas.fillStyle=“#FF0000”；
convas.moveTo（cood1，cood2）；
convas.lineTo（50100）；
convas.lineTo（70100）；
convas.closePath（）；
convas.fill（）；
document.getElementById（'textID'）。innerHTML='形状参数为：'+myselect+”，坐标为：“+”（“+cood1+”，“+cood2+”）”）“+”图像颜色：“+imgcolor+”线宽为：“+lnwidth；
}


三角
50
50
红色
5.
画图

函数绘图（）{
var myselect=document.getElementById（'myselect'）.value；
var cood1=document.getElementById（'cood1'）。值；
var cood2=document.getElementById（'cood2'）.value；
var imgcolor=document.getElementById（'imgcolor'）.value；
var lnwidth=document.getElementById（'linewidth'）。值；
var myc=document.getElementById（'myCanvas'）；
var convas=myc.getContext（'2d'）；
convas.beginPath（）；
convas.linewidth=lnwidth；
convas.fillStyle=“#FF0000”；
convas.moveTo（cood1，cood2）；
convas.lineTo（50100）；
convas.lineTo（70100）；
convas.closePath（）；
convas.fill（）；
document.getElementById（'textID'）。innerHTML='形状参数为：'+myselect+”，坐标为：“+”（“+cood1+”，“+cood2+”）”）“+”图像颜色：“+imgcolor+”线宽为：“+lnwidth；
}


三角
50
50
红色
5.
画图
欢迎来到StackOverflow！到目前为止你都尝试了什么？欢迎来到StackOverflow！到目前为止你都试了些什么？非常感谢！！真的很有用：）非常感谢！！这很有效……这真的很有帮助：）
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+".";
}

<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>