Write html text based on user select inputs
Question
I have a html page which draws multiple geometrical figures based on dynamic select user input in a html canvas.
<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.
Note: The text should appear only on button click only.
3 answers
solution1
0 ACCPTED 2016-04-25 08:41:29
Add the following to your onClick function. Also create an element with id details (or anything you want but it needs to correspond to the first selector in the function)
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+".";
}
solution2
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>
solution3
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to filter div's based on text input and select inputs together
Multiplying select options by text-box user inputs in JavaScript
Javascript changing the color of text on a button based on user inputs
Append text inputs based on value provided by the user w/ jQuery
Auto Generate HTML Text inputs based on selection value
Dynamically show/hide HTML form text fields based on date inputs
HTML/JS User inputs
jQuery select HTML5 text field inputs like “text”, “search”, “email” etc
Edit Text User inputs to textbox
PHP, MYSQL + javascript? to produce a result (price) based on three user SELECT inputs
Related Tags