How to treat an input data as variable?

bobkuspe · Apr 13, 2023

Dear friends,

Could someone help me to fix this code? I want fill up the data manually instead using the fixed data

JavaScript:

<script>

function onClick(elem)
var data = [
      ['1970', a], ['1980', e], ['1990', i] ,
     ['2000', d], ['2010', h], ['2020', m]
  ];
 
  var ax = document.getElementById("a").value;
   var dx = document.getElementById("d").value;
    var ex = document.getElementById("e").value;
     var hx = document.getElementById("h").value;
      var ix = document.getElementById("i").value;
       var mx = document.getElementById("m").value;
    var a = ax.value; //How to treat an input data as variables
         var d = dx.value;
          var e = ex.value;
           var h = hx.value;
            var i = ix.value;
             var m = mx.value;

    
  document.write('<img src="http://chart.apis.google.com/chart?'
               + 'chs=500x400'
               + '&amp;cht=p3'
               + '&amp;chco=33ff00'
               + '&amp;chd=t:');   
  for (var i=0; i < data.length; ++i) {
    document.write(data[i][1]);
    if (i < data.length-1) document.write(",");
  }
 
  document.write('&amp;chxt=x,y');
  document.write('&amp;chxl=0:|');
  for (var i=0; i < data.length; ++i) {
      document.write(data[i][0]);
      if (i < data.length-1) document.write("|");
  }
  document.write('&amp;chxr=1,0,100');
  document.write('">');
 }
 </script>

HTML:

<form id='data'>
      <input type="text" id="a" value="" />
      <input type="text" id="d" value="" />
      <input type="text" id="e" value="" />
      <input type="text" id="h" value="" />
      <input type="text" id="i" value="" />
      <input type="text" id="m" value="" />
      <input type='submit' id='data' onclick="onClick();">
    </form>

Regards

FResher · Apr 14, 2023

Hello,

more details for the aim are required.
where are the faults, bugs or leaks ?

give us more explanation please.

about JS :

- when you use : "var" , you're creating a var. it -reset- the values in.

- document.getElementById("the_var").value could be use 'as it is'. it's already the value you want.

- creating an element like the 'img' need 'elements' function, you made it by a string construction, it's not safe this way.

read this article :

Document: createElement() method - Web APIs | MDN

In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

developer.mozilla.org

and this one :

Document: createAttribute() method - Web APIs | MDN

The Document.createAttribute() method creates a new attribute node, and returns it. The object created is a node implementing the Attr interface. The DOM does not enforce what sort of attributes can be added to a particular element in this manner.

developer.mozilla.org

bobkuspe · Apr 14, 2023

Thank you for your feedback.

I wanted to use random data to build a dynamic chart, keeping the data as is.

I believe that the problem lies in this line.

HTML:

<input type='submit' id='data' onclick="onClick();">

Padonak · Apr 15, 2023

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    #pie{
       width:900px;
       height:500px;
       }
    input{
       text-align:center;
       margin-top:3px;
       margin-bottom:3px;
       }
    [type="button"]{
       cursor:pointer;
       }
    </style>
   <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>   
      <form>
      <br />
      <input type="button" value="Update the chart" />
    </form>
    <script>
    let arr = [
          ['Task', 'Hours per Day'],
          ['Work',    11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 1],
          ['Sleep',    6],
          ['Pornhub', 2]
        ];
    
    document
       .querySelector('form')
          .insertAdjacentHTML( 'afterbegin',
             arr
                .filter( x => typeof x[1] == 'number' )
                   .map( n => `<input type="text" placeholder="Value for ${n[0]}" value="" />`)
                      .join('<br />') );
    
    Object.assign(document.querySelector('[type="button"]').style, {
       'minWidth' : document.querySelector('[type="text"]').offsetWidth + 'px'
    });
    
    document.querySelector('[type="button"]').addEventListener( 'click', function(){
       document.querySelectorAll('[type="text"]').forEach( (x, i) => {
          const val = x.value.replace( /[^\d]+/g ,''); /* we need digits only */
          if(val) arr[i + 1][1] = +val
          drawChart()
       } );
    });
    
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
      
      
      function drawChart() {
        const data = google.visualization.arrayToDataTable(arr);

        const options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        const chart = new google.visualization.PieChart(document.getElementById('pie'));
        chart.draw(data, options);
      }
    </script>
    <div id="pie"></div>
  </body>
</html>

bobkuspe · Apr 15, 2023

Many thanks Padonak

This is what Я call Knowing How to Program

How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
I want to Display Excel As HTML In js	2	Feb 24, 2023
I HAVE MADE AN IMPROVED INPUT FOR INTEGERS ONLY	3	Oct 28, 2024
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
Collect Excel Data from Website	5	Apr 30, 2022
Closing an overlay outside the overlay as well	1	Dec 11, 2022
How can I create a table using the input element?	1	Mar 25, 2022
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022

How to treat an input data as variable?

bobkuspe

FResher

Document: createElement() method - Web APIs | MDN

Document: createAttribute() method - Web APIs | MDN

bobkuspe

Padonak

bobkuspe

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads