Как синхронизировать два текстовых поля в коде JavaScript? - PullRequest
0 голосов
/ 12 апреля 2019

Я пытаюсь обновить два текстовых поля в моем коде, textbox1 используется для информации о свойстве класса ученика (age), textbox2 используется для обновления возраста студента.После синхронизации мне нужно обновить класс.

Процесс вывода показан здесь, на следующем рисунке:

<script>

var n = -1;
var txtbox;
var example1 = '{ "students" : [' +
  '{ "First Name":"David" , "Last Name":"Berman", "Age":18 },' +
  '{ "First Name":"Anna" , "Last Name":"Smith", "Age":27 },' +
  '{ "First Name":"Peter" , "Last Name":"Jones", "Age":23 } ]}';
var obj = JSON.parse(example1); // backup

// alternative
var example2 = {
  "students": [{
      "First Name": "David",
      "Last Name": "Berman",
      "Age": 18
    },
    {
      "First Name": "Anna",
      "Last Name": "Smith",
      "Age": 27
    },
    {
      "First Name": "Peter",
      "Last Name": "Jones",
      "Age": 23
    }
  ]
}


$(document).ready(function() {

  console.log(obj);
  $.each(obj["students"], function(i, o) {
    var opt = $("<option/>");
    $(opt).val(i);
    $(opt).text(o["First Name"] + " " + o["Last Name"]);
    $("#selStudents").append(opt);



  })

  $("#selStudents").change(function() {
    n = parseInt($(this).find("option:selected").val());
    var student = obj["students"][n];
    var s = "";
    for (var propertyName in student) {

      s += "<div><label>" + propertyName + ":" + "</label><input value='" + student[propertyName] + "'/></div>";


    }

    $("#selctedData").html(s);
    $("#inpAge").val(student.Age);
    $("#monitor").html(student.ToHTMLString());

  })


})


function GetNewAge() {
  var newAge = $("#inpAge").val();

  if (n != -1) {
    //var student = obj["students"][n];
    var student = example2;
    for (var propertyName in student) {}

    student["Age"] = newAge;
    //document.write(student["Age"]);
  } else {
    document.write("Age not exist!");

  }

}

function Reset() {

}

</script>
</head>
<body>
<div id="" style="width:400px;margin:30px auto">
    <div style="float:left">
        <select id="selStudents" multiple></select>
    </div>
    <div style="float:left;margin-left:20px; position:absolute; top:30px; left: 500px; " id="selctedData" >
        select student ..
    </div>

    <div style="width:400px;margin:30px auto; position:absolute; top:100px;">
        <input type="number" min="1" max="100" id="inpAge" />
        <button onclick="GetNewAge()">Update</button>
        <button onclick="Reset()">Reset</button>
        <div id="monitor"></div>
    </div>

    <div style="clear:both"></div>
</div>
</body>

Проблемные строки в коде: где ($ ("#selStudents"). change (function () Я создал textbox1 в этой строке. Я понятия не имею, как подключить его к textbox2, который создал здесь тело.

Поэтому, когда я нажимаю кнопку обновления,программа возьмет значение из textbox2 и вставит его в текстовое поле 1. Кроме того, потребуется сохранить эту информацию в 'example2'.

Мой код использует этот файл - 'student.js', яопубликует его, если потребуется.

Я почти уверен, что мне нужно решить проблему внутри функции: 'GetNewAge'.

Любая помощь будет принята с благодарностью!

Хаим

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...