根據用戶選擇輸入編寫html文本

Question

我有一個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），紅色，線寬10。

注意：文本應僅在按鈕單擊時出現。

Answer 1

將以下內容添加到onClick函數中。 還要創建一個帶有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+".";
}

Answer 2

嘗試這個

 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>

Answer 3

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

根據用戶選擇輸入編寫html文本

問題描述

3 個解決方案

解決方案1
0 已采納 2016-04-25 08:41:29

解決方案2
0 2016-04-25 08:56:31

解決方案3
0 2016-04-25 09:51:18

根據用戶選擇輸入編寫html文本

問題描述

3 個解決方案

解決方案1 0 已采納 2016-04-25 08:41:29

解決方案2 0 2016-04-25 08:56:31

解決方案3 0 2016-04-25 09:51:18

解決方案1
0 已采納 2016-04-25 08:41:29

解決方案2
0 2016-04-25 08:56:31

解決方案3
0 2016-04-25 09:51:18