Question

我的代码可以在这里找到：https://www.w3schools.com/code/tryit.asp?filename=FHC2UOT0RQX6
程序接受数组var array=[1,0,1,0,1,1,0,0,0]并解决伪三元编码方案。我想做的就是简单。改变数组元素的内容（当我想插入不同的输入时），我想使用输入文本并从中获取值，当我按下时输入或提交按钮，它将根据用户输入解决问题。是否可以获取文本输入的值并使它们充当数组？以下是下面的脚本，但最好查看整个代码，使用上面的链接。

 <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>

Answer 1

实际上你想在函数内部编写代码并分别调用函数onload和onclick。试试这个，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>

Answer 2

注意，<input>元素是自动关闭的。 <input>元素应该是<body>元素的子节点，而不是<head>元素。 id中document元素的"tf"应该是唯一的。将id元素的重复input <script>替换为唯一值。从div元素的子节点中删除<script>元素。在关闭</body>标记之前放置.innerHTML元素。替换联接document.write() click

将input type="button"个事件附加到String.prototype.split()，使用带有参数""的{{1}}来创建input type="text" .value，Array.prototype.map()的数组使用参数Number将String转换为Number值。将结果数组分配给array变量。在#js作为参数再次调用函数之前，将.innerHTML array设置为空字符串。

<!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>

获取文本输入的值并将它们存储到数组中

2 个答案: