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

我有一個html頁面，它基於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.

注意：文本應該只出現在僅用於按鈕點擊的位置。

來源

2016-04-25 MaxPyne

歡迎到StackOverflow！你試過什麼了？ – manniL

將下列內容添加到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+"."; 
}

來源

2016-04-25 08:41:29

非常感謝！它的作品...這真的很有用:) – MaxPyne

試試這個

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>

來源

2016-04-25 08:56:31 Jobin

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

來源

2016-04-25 09:51:18 Sunoo

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

回答

相關問題