(Javascript + HTML) Wie bekomme ich meine ausgewählte Aussage Antwort in meine Zeichenfläche

Ich versuche, meinen Code zu erhalten, um den Benutzer ihre Eingabe von der Select-Anweisung zurück zu ihnen durch die Zeichenleinwand anzuzeigen. Ich bin nicht sicher, wie man das tut und würde jede Hilfe schätzen. Hier ist mein Code.(Javascript + HTML) Wie bekomme ich meine ausgewählte Aussage Antwort in meine Zeichenfläche

<html> 
<head> 
    <title>Greeting Card Generator</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript"> 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 

      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 
      ctx.fillText("Greeting Card", 135, 55); 
      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
    </script> 
    <style> 
     #div1{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 24px; 
      text-align: center; 
      border: 25px solid red; 
      padding: 25px; 
      width: 50%; 
      margin: 0 auto; 
     } 
     #div2{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 16px; 
      text-align: center; 
      border: 25px solid orange; 
      padding: 25px; 
      width: 50%; 
      height: 300px; 
      margin: 0 auto; 
     } 



    </style> 
</head> 
<body> 
    <div id="div1">Greeting Card Generator</div> 
    <div id="div2"> 
     What Kind of Greeting Would You Like?<select name="greet" id="greet"> 
      <option value="-1" selected>-Select-</option> 
      <option value="1">Birthday</option> 
      <option value="2">Graduation</option> 
      <option value="3">Engagement</option> 
     </select> 
     <br> 
     <input type="button" value="make card" id="draw" onclick="draw();"> 
    </div>  
    <canvas id="card" width="1400" height="900"></canvas> 
</body>

aktualisiert Code

<html> 
<head> 
    <title>Greeting Card Generator</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript"> 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 

      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 

      ctx.fillText(document.getElementById("greet").options[document.getElementById("‌greet").selectedIndex].text, 135, 55); 
      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
    </script> 
    <style> 
     #div1{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 24px; 
      text-align: center; 
      border: 25px solid red; 
      padding: 25px; 
      width: 50%; 
      margin: 0 auto; 
     } 
     #div2{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 16px; 
      text-align: center; 
      border: 25px solid orange; 
      padding: 25px; 
      width: 50%; 
      height: 300px; 
      margin: 0 auto; 

     } 



    </style> 
</head> 
<body> 
    <div id="div1">Greeting Card Generator</div> 
    <div id="div2"> 
     What Kind of Greeting Would You Like?<select name="greet" id="greet"> 
      <option value="-1" selected>-Select-</option> 
      <option value="1">Birthday</option> 
      <option value="2">Graduation</option> 
      <option value="3">Engagement</option> 
     </select> 
     <br> 
     What is the name of the recipient<input type="text" id="name" name="name"/> 
     <br> 
     What background colour would you like on the card? 
     <input type="radio" name="background" id="bgRed" value="red" checked/>Red 
     <input type="radio" name="background" id="bgBlue" value="blue" />Blue 
     <br> 
     <input type="button" value="make card" id="draw" onclick="draw();"> 
    </div>  
    <canvas id="card" width="1400" height="900"></canvas> 
</body>

Quelle

2016-07-01 Orphan_Crippler

Bist du gerade dabei, wie du den ausgewählten Text aus dem DropDown holen kannst und ihn dann vielleicht anstelle von/neben "" Greeting Card "' verwenden? Läuft der Rest Ihres Zeichencodes, was Sie erwarten? –

Ich habe das gleiche Gefühl wie @jamesthorpe. Verwenden Sie in diesem Fall 'ctx.fillText (document.getElementById (" greet "). Options [document.getElementById (" greet "). SelectedIndex] .text, 135, 55)' oder besser zerlegen Sie es mit einer Variablen oder zwei – dirluca

Vielen Dank für Ihre Antwort. Ja, ich möchte es ersetzen "Greeting Card" Ich habe es gerade als Platzhalter vorerst verwendet. Die Codezeile, die du mir gegeben hast, hatte nicht das gewünschte Ergebnis. Ich bin irgendwie neu bei Javascript –

die Sie interessieren, habe ich nur Click-Ereignis Arbeit gemacht. Entfernen Sie onClick event von Ihrem Button.

var bt = document.querySelector("#draw"); 
function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 
      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 
      ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 135, 55); 

      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
bt.addEventListener("click",draw);

Quelle

2016-07-01 16:00:34 frnt

(Javascript + HTML) Wie bekomme ich meine ausgewählte Aussage Antwort in meine Zeichenfläche

Antwort

Verwandte Themen