MaxPyne MaxPyne - 6 months ago 6
Javascript Question

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.

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


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+".";