title: How do I pass a value from js to python?
body: <p>There are buttons for selecting relief and background in The a-frame window. You must pass the values of the JS variable to the python variable to save to the database. How to pass value to django from JS code of button selection?</p>
  
  <p>May is variable, <code>skyEl.setAttribute ('src', '#blank')</code> assign Python variable</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var sceneEl = document.querySelector('a-scene');
  
  
  AFRAME.registerComponent('foo', {
    init: function () {
      var skyEl = sceneEl.querySelector('a-sky');
      //Changing color using JQuery here
      $(document).ready(function(){
        let color, src,mtl, terrain, text1;
     $("#text1").click(function(e){
       var x = document.getElementById("fname").value;
          //document.write(x);
          document.getElementById("output").innerText = x;
  
          return false;
     });
        $("#color button").click(function(e){
          color = e.currentTarget.className;
          skyEl.setAttribute('src', '#blank');
          skyEl.setAttribute('color', color);
          {{ background }} = color;
        });
  
   $("#picture button").click(function(e){
          src = e.currentTarget.className;
          skyEl.removeAttribute('color');
          skyEl.setAttribute('src', '#'+src);
        });
        $("#terrain button").click(function(e){
     var skob = sceneEl.querySelectorAll('.obj_model');
  
          terrain = e.currentTarget.className;
    mtl = e.currentTarget.name;
  
    for (let index = 0; index &lt;= skob.length; ++index) {
    //alert(mtl);
    //skyEl.setAttribute('color', '#1fa9e3');
  
  
  
      skob[index].setAttribute('src', '#'+terrain+'-obj');
   skob[index].setAttribute('mtl', '#'+mtl);
   if(terrain=='city'){
   skob[index].setAttribute('scale', '30 120 35');
  
  
  
   }
   else
   {
    skob[index].setAttribute('scale', '5 10 5') ;
    }
  }
  
  
        });
  
      });
    }
  
  });
  
        sourceURL=pen.js</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post"&gt;
   &lt;div id="left" &gt;
    &lt;div id="select"&gt;
  &lt;div id="cssmenu"&gt;
  
  
                  {% csrf_token %}
          &lt;input type="text" placeholder="title" name="title"&gt;
          &lt;input type="text" placeholder="body" name="body"&gt;
          &lt;input type="text" placeholder="background" name="background"&gt;
  
  
  
  
      &lt;ul&gt;
   &lt;li class='has-sub'&gt;&lt;a href='index.html'&gt;&lt;span&gt;Terrain&lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
        &lt;div id="terrain"&gt;
                  &lt;button onclick="this.disabled=true;" name="city-mtl" value="City" class="city"&gt;City&lt;/button&gt;
                    &lt;button onclick="this.disabled=true;" name="mars-mtl" value="Mars" class="mars"&gt;Planet&lt;/button&gt;
  
        &lt;button type="button"name="dey-mtl" value="Forest" class="dey"&gt;Forest&lt;/button&gt;
       &lt;/div&gt;
  
  
            &lt;/ul&gt;
       &lt;/li&gt;
  
  
                 &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Background&lt;/span&gt;&lt;/a&gt;
            &lt;ul&gt;
          &lt;div id="color"&gt;
            &lt;button type="button" style="background-color:#c6aa99" class="#c6aa99"&gt;&lt;/button&gt;
            &lt;button type="button" style="background-color:#E1A600" class="#E1A600"&gt;&lt;/button&gt;
            &lt;button type="button" style="background-color:#290942" class="#290942"&gt;&lt;/button&gt;
            &lt;button type="button" style="background-color:#9392D2" class="#9392D2"&gt;&lt;/button&gt;
            &lt;button type="button" style="background-color:#1fa9e3" class="#1fa9e3"&gt;&lt;/button&gt;
      &lt;/div&gt;
     &lt;div id="picture"&gt;
     &lt;button type="button" style="background:url(icon/star.ico)" class="star"&gt;&lt;/button&gt;
       &lt;button type="button" style="background:url(icon/cit.ico)" class="city"&gt;&lt;/button&gt;
            &lt;button type="button" style="background:url(icon/mars.ico)" class="mars" &gt;&lt;/button&gt;
        &lt;button type="button" style="background:url(icon/cosmos.ico)" class="cosmos"&gt;&lt;/button&gt;
        &lt;button type="button" style="background:url(icon/dey.ico)"  class="dey"&gt;&lt;/button&gt;
        &lt;button type="button" style="background:url(icon/jungle.ico)" class="blue" &gt;&lt;/button&gt;
         &lt;button type="button" style="background:url(icon/wasteland.ico)" class="wasteland" &gt;&lt;/button&gt;
  
  
       &lt;/div&gt;
  
  
  
          &lt;/li&gt;
  
   &lt;/ul&gt;
  
  
  
  
            &lt;/ul&gt;
       &lt;/li&gt;
        &lt;button type="submit" value="save"&gt;SAVE&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  
  
  
  
  &lt;a-scene id="aframe" foo&gt;
    &lt;a-assets&gt;
      &lt;!-- Images. --&gt;
   &lt;img id="star" src="https://ucarecdn.com/30d7b1e6-2867-4396-a64d-8fb41e69ce0d/"&gt;
      &lt;img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg"&gt;
      &lt;img id="cosmos" src="https://ucarecdn.com/34a5bbdb-1820-44c3-a848-26acd9356bbe/"&gt;
      &lt;img id="sechelt" src="https://ucarecdn.com/40714251-095c-407e-9b5f-76f361db3b78/"&gt;
      &lt;img id="blank" src="https://ucarecdn.com/fc2d2aa9-08b0-4d05-931c-85b78130d758/"&gt;
   &lt;img id="mars" src="https://ucarecdn.com/4496c535-1b3d-4c1c-a24f-8fa6bcfb895a/"&gt;
   &lt;img id="dey" src="https://ucarecdn.com/1bbbf75b-cc02-450a-91af-e528a6eaf8a1/"&gt;
   &lt;img id="blue" src="https://c1.staticflickr.com/3/2929/33929340355_1fb4ecf6e0_k.jpg"&gt;
   &lt;img id="wasteland" src="https://c1.staticflickr.com/5/4556/24549684008_5b18834af3_o.png"&gt;
  
  
  
  
  
        &lt;img id="cobblestones" src="https://cdn.glitch.com/698891c8-2abb-4520-a188-67e9ab3be5ef%2FFloorStreets0072_1_270.jpg?1509915918092" crossorigin="anonymous" /&gt;
        &lt;img id="moon" src="https://cdn.glitch.com/698891c8-2abb-4520-a188-67e9ab3be5ef%2Fevol_moon_2048x1024.00252_print.jpg?1509947414949" crossorigin="anonymous" /&gt;
        &lt;img id="envmap" src="https://cdn.glitch.com/698891c8-2abb-4520-a188-67e9ab3be5ef%2Fscreenshot-codevember%20sword-1509947893116.jpg?1509947964544" crossorigin="anonymous" /&gt;
  
  
  
   &lt;img id="blur-image" src="https://cdn.glitch.com/daae73ed-1502-4527-b809-03c18d6fb3e5%2Fblur.png?1503612651214"&gt;
  
          &lt;a-asset-item id="street-lamp-obj" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fmodel.obj?1503963016964"&gt;&lt;/a-asset-item&gt;
          &lt;a-asset-item id="street-lamp-mtl" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fmaterials.mtl?1503963017033"&gt;&lt;/a-asset-item&gt;
  
          &lt;a-asset-item id="city-obj" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fcity-block.obj?1504041197187"&gt;&lt;/a-asset-item&gt;
          &lt;a-asset-item id="city-mtl" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fcity-block.mtl?1504041197228"&gt;&lt;/a-asset-item&gt;
  
   &lt;a-asset-item id="dey-obj" src="https://cdn.glitch.com/f20b51e2-bcd3-47c9-8cd2-8928357227f0%2Flowpolytree.obj?1541822463835"&gt;&lt;/a-asset-item&gt;
   &lt;a-asset-item id="mars-obj" src="https://cdn.glitch.com/f20b51e2-bcd3-47c9-8cd2-8928357227f0%2Fmountains.obj?1541911076654"&gt;&lt;/a-asset-item&gt;
    &lt;a-asset-item id="manufacturable-obj" src="https://cdn.glitch.com/f20b51e2-bcd3-47c9-8cd2-8928357227f0%2Fdebris.obj?1541911093399"&gt;&lt;/a-asset-item&gt;
          &lt;a-asset-item id="dey-mtl" src="https://cdn.glitch.com/f20b51e2-bcd3-47c9-8cd2-8928357227f0%2Flowpolytree.mtl?1541822474000"&gt;&lt;/a-asset-item&gt;
   &lt;a-asset-item id="mars-mtl" src="https://cdn.glitch.com/10eac27a-eba4-4e00-be20-e744cb21afd2%2Fcity-block.mtl?1504041197228"&gt;&lt;/a-asset-item&gt;
          &lt;a-mixin id="transition" dur="7000" direction="alternate" repeat="indefinite" easing="ease-out-cubic"&gt;&lt;/a-mixin&gt;
    &lt;/a-assets&gt;
    &lt;a-sky id="sky" color="skyblue" &gt;&lt;/a-sky&gt;
  
  
  &lt;a-entity id='text-container' position="0 1.6 -0.5"&gt;  &lt;/a-entity&gt;
      &lt;a-entity id="output" text="value: output; align: center;" position="0 0 0"&gt;&lt;/a-entity&gt;
  
        &lt;a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="100" height="100" color="#00FF00" material="roughness: 1;"&gt;&lt;/a-plane&gt;
  
  
        &lt;!-- Cityscape --&gt;
  
        &lt;a-obj-model class="obj_model" id="city-scape-left" position="-55 0 -40" rotation="0 90 0" scale="30 65 35" src="#blank" mtl="#city-mtl"&gt;&lt;/a-obj-model&gt;
        &lt;a-obj-model  class="obj_model" id="city-scape" position="-5 0 -40" rotation="0 90 0" scale="30 35 35" src="#blank" mtl="#city-mtl"&gt;&lt;/a-obj-model&gt;
        &lt;a-obj-model  class="obj_model" id="city-scape-right" position="50 0 -40" rotation="0 90 0" scale="30 65 35" src="#blank" mtl="#city-mtl"&gt;&lt;/a-obj-model&gt;
  
        &lt;!-- Street Lamp --&gt;
        &lt;a-entity id="street-lamp"&gt;
          &lt;a-obj-model id="street-lamp-model" position="2 2 -5" rotation="0 180 0" src="#street-lamp-obj" mtl="#street-lamp-mtl"&gt;&lt;/a-obj-model&gt;
          &lt;a-light id="street-lamp-light" position="1.4 3.6 -5" type="point" intensity="0" color="#00E6FF"&gt;
            &lt;a-animation attribute="light.intensity"
                         from="0"
                         to="1"
                         &gt;
            &lt;/a-animation&gt;
          &lt;/a-light&gt;
  
          &lt;a-image id="light-bulb-image" position="1.4 3.6 -5" rotation="-90 0 0" scale="0.6 0.6 0.6" opacity="0" src="#blur-image"&gt;
            &lt;a-animation attribute="material.opacity"
                         from="0"
                         to="1"
                         &gt;
            &lt;/a-animation&gt;
          &lt;/a-image&gt;</code></pre>
  </div>
  </div>
  </p>