CODEWITHSUNDEEP
javascript
csandreas1
csandreas1

Reputation: 2378

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

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>

Upvotes: 3

Views: 1954

Answers (2)

vijay
vijay

Reputation: 926

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>

Upvotes: 3

guest271314
guest271314

Reputation: 1

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>

Upvotes: 2

Related Questions