Take the values of a text input and store them into an array

Question

My code can be found here: https://www.w3schools.com/code/tryit.asp?filename=FHC2UOT0RQX6
The program accepts an array var array=[1,0,1,0,1,1,0,0,0] and solves the pseudoternary encoding scheme. All i want to do is simple. Insead of changing the elements of the array(when i want to insert a different input), i want to use the input text and take the values from it and when i press enter or the submit button, it will solve the problem depending on the user inputs. Is that possible to take the values of the text input and make them act as an array ?
Here is the script below but it is better to see the whole code, use the link above.

 <script  type="text/javascript">
     var array=[1,0,1,0,1,1,0,0,0]; //input here 
     var text="";
     for(var b=0;b<array.length;b++)
{ 
     text+=array[b];        
   }
       document.getElementById('enc').innerHTML=text;


        pseudo(array);   

function pseudo(a) //function pseudo
{
    var pulse = false;

    var count = 0;

    for(var b=0;b<array.length;b++)

        if(a[b]===1)
        {
        count++;

       document.write('<img src="http://i.imgur.com/30DU9iC.png">');
        }
        else if(a[b]===0)
        {
          count++;
         pulse=!pulse; //toggles boolean value each time it finds zero

        if(pulse===true) //pulse shows up
            {

      document.write('<img src="http://i.imgur.com/Ghtajy7.png">');


            }
            else{

                document.write('<img class="down" src="http://i.imgur.com/uObQjTA.png">');


            }
        }

}

        </script>

If interpret Question correctly, why can you not use array? What is requirement? — guest271314
– guest271314, Commented Dec 10, 2016 at 9:07
because i want to take each number one by one to solve the problem, it is not just a number,i check each of the elements. — csandreas1
– csandreas1, Commented Dec 10, 2016 at 9:09
You want to get document.getElementById('enc').innerHTML and create an array from the .innerHTML? — guest271314
– guest271314, Commented Dec 10, 2016 at 9:11

vijay · Accepted Answer · 2016-12-10 10:16:01Z

3

Actually you want to write your code inside a function and call the function onload and onclick respectively. Try this, http://www.w3schools.com/code/tryit.asp?filename=FALV2XZQ7V36

var array = [1, 0, 1, 0, 1, 1, 0, 0, 0]; //input here 
var text = "";

function loading() {

  for (var b = 0; b < array.length; b++) {
    text += array[b];
  }
  document.getElementById('enc').innerHTML = text;


  pseudo(array);
}

function pseudo(a) //function pseudo
  {
    var pulse = false;

    var count = 0;
    var output = '';
    var b = 0;
    for (b = 0; b < a.length; b++)

      if (a[b] === 1) {
        count++;
        //document.write('<p class="w3-center w3-text-red">'+'Step '+count+': No line'+'<br>'+'</p>');
        //document.write('<img src="http://i.imgur.com/30DU9iC.png">');
        output += '<img src="http://i.imgur.com/30DU9iC.png">';
      } else if (a[b] === 0) {
      count++;
      pulse = !pulse; //toggles boolean value each time it finds zero

      if (pulse === true) //pulse shows up
      {
        //document.write('<p class="w3-center  w3-text-red">'+'Step: '+count+' goes up'+'<br>'+'</p>');
        //document.write('<img src="http://i.imgur.com/Ghtajy7.png">');
        output += '<img src="http://i.imgur.com/Ghtajy7.png">';


      } else {
        // document.write('<p class="w3-center  w3-text-red">'+'Step: '+count+' goes down'+'<br>'+'</p>');
        //document.write('<img class="down" src="http://i.imgur.com/uObQjTA.png">');
        output += '<img class="down" src="http://i.imgur.com/uObQjTA.png">';


      }

    }
    document.getElementById("js").innerHTML = output;

  }

function gettext() {

  var inputText = document.getElementById("tf").value;
  var inparray = [inputText.length];
  for (i in inputText) {
    inparray[i] = parseInt(inputText[i]);
  }
  document.getElementById('enc').innerHTML = inputText;
  pseudo(inparray);
}

body {} .pad {
  padding-top: 20%;
}
.inline {
  display: inline;
}
.down {
  margin: 0 -2 -65 -3;
}

<html>

<head>



  <title>Pseudoternary Encoding</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <!--  <link rel="stylesheet" href="style.css" type="text/css"/>-->

  <h4>Use this input </h4>
  <input type="text" id="tf"></input>
  <input type="button" style="width:50px;" value="solve" onclick="gettext()" id="tf"></input>

</head>

<body onload="loading()" ;>
  <h1>Illustration of pseudoternary encoding scheme </h1>

  <h1 class="pad w3-center">Encode <span id="enc" class="w3-text-red"> </span></h1>

  <div id="js" class="w3-center">

  </div>
</body>

</html>

edited Dec 10, 2016 at 10:16

answered Dec 10, 2016 at 9:46

vijay

9267 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

csandreas1 Over a year ago

nice, why the style of the down image isn't working?

vijay Over a year ago

i have updated the link please check there , css is working in that link

guest271314 Over a year ago

Note, id of element in` document` should be unique.

csandreas1 Over a year ago

yep i knew about it maybe i forgot to change that

vijay Over a year ago

For(i in inputText) in this i fetch the index value from a string inputText one by one

|

guest271314 · Accepted Answer · 2016-12-10 10:11:07Z

Note, <input> element is self-closing. <input> element should be child nodes of <body> element instead of <head> element. id of element in document should be unique. Replace duplicate "tf" id at input elements with unique values. Remove <script> element from being child node of div element. Place <script> element before closing </body> tag. Substitute concatenating .innerHTML for document.write()

Attach click event to input type="button", use String.prototype.split() with parameter "" to create an array from input type="text" .value, Array.prototype.map() with parameter Number to convert String to Number values. Assign resulting array to array variable. Set #js .innerHTML to empty string before calling function again with array as parameter.

<!DOCTYPE html>

<html>

<head>

  <style>
    body {}
    
    .pad {
      padding-top: 20%;
    }
    
    .inline {
      display: inline;
    }
    
    .down {
      margin: 0 -2 -65 -3;
    }
  </style>

  <title>Pseudoternary Encoding</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="style.css" type="text/css" />



</head>

<body>
  <h4 style="margin-top:240px;position:absolute">Use this input </h4>

  <h1>Illustration of pseudoternary encoding scheme </h1>
  <input type="text" style="position:relative" id="tf">
  <input type="button" style="position:relative;width:50px;" value="solve" id="button">

  <h1 class="pad w3-center">Encode <span id="enc" class="w3-text-red"> </span></h1>



  <div id="js" class="w3-center"> </div>
  <script>
    var array = [1, 0, 1, 0, 1, 1, 0, 0, 0]; //input here 
    var text = "";
    var enc = document.getElementById("enc");
    var button = document.getElementById("button");
    var tf = document.getElementById("tf");
    var center = document.getElementById("js");
    for (var b = 0; b < array.length; b++) {
      text += array[b];
    }
    enc.innerHTML = text;


    pseudo(array);

    function pseudo(a) {
      var pulse = false;

      var count = 0;

      for (var b = 0; b < array.length; b++)

        if (a[b] === 1) {
        count++;
        center.innerHTML += '<img src="http://i.imgur.com/30DU9iC.png">';
      } else if (a[b] === 0) {
        count++;
        pulse = !pulse; //toggles boolean value each time it finds zero

        if (pulse === true) //pulse shows up
        {
          center.innerHTML += '<img src="http://i.imgur.com/Ghtajy7.png">';


        } else {
          center.innerHTML += '<img class="down" src="http://i.imgur.com/uObQjTA.png">';


        }
      }

    }

    button.onclick = function() {
      array = tf.value.split("").map(Number);
      enc.innerHTML = array.join("");
      console.log(array, enc);
      center.innerHTML = "";
      pseudo(array)
    }
  </script>
</body>

</html>

Collectives™ on Stack Overflow

Take the values of a text input and store them into an array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related