Я немного смущен тем, почему мой javascript не превращает мои строки в цифры.
<div class="form-group">
<h3>Question #1</h3>
<label for="exampleSelect1">Question?</label>
<select class="form-control" id="q1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
JavaScript:
$("#submitBtn").on("click", function(){
event.preventDefault();
var q1 = $("#q1").val().trim();
var q2 = $("#q2").val().trim();
var q3 = $("#q3").val().trim();
var q4 = $("#q4").val().trim();
var q5 = $("#q5").val().trim();
var q6 = $("#q6").val().trim();
var q7 = $("#q7").val().trim();
var q8 = $("#q8").val().trim();
var q9 = $("#q9").val().trim();
var q10 = $("#q10").val().trim();
var newFriend = {
name: $("#inputName").val().trim(),
photo: $("#inputPic").val().trim(),
scores: [
parseFloat(q1),
parseFloat(q2),
parseFloat(q3),
parseFloat(q4),
parseFloat(q5),
parseFloat(q6),
parseFloat(q7),
parseFloat(q8),
parseFloat(q9),
parseFloat(q10),
]
};
Когда я console.log(newFriend), он продолжает превращать оценки в строки. Я пробовал Number(), parseInt(), и он все еще не работает.
Ваш код работает так, как должен.
Но, основываясь на некоторых комментариях, которые вы сделали, кажется, что этот код работает на сервере, а не на клиенте, и поэтому отправляется через HTTP, где все является строкой. Вы действительно должны отредактировать свой вопрос, чтобы полностью объяснить среду, в которой работает код.
Вы можете увидеть сокращенную версию вашего кода, работающую ниже, и вы увидите, что данные являются числовыми в массиве. Я только что изменил событие, которое запускает код в событие change
select
.
Наконец, нет необходимости вызывать .trim()
в ваших значениях select
потому что вы не включаете пробелы в элементах option
для начала. trim()
следует использовать всякий раз, когда есть ввод пользователя.
$("#q1").on("change", function(){
var q1 = $("#q1").val().trim();
var newFriend = {
scores: [
parseFloat(q1),
]
};
console.log(newFriend.scores[0], typeof newFriend.scores[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<h3>Question #1</h3>
<label for="exampleSelect1">Question?</label>
<select class="form-control" id="q1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Вы можете использовать parseInt и передать также radix. Упрощенный унарный оператор также может использоваться для преобразования строки в число.
Обратите внимание, что в параметре атрибута значения не было.
$("#submitBtn").on("click", function() {
event.preventDefault();
var q1 = parseInt($("#q1").val().trim(), 10)
console.log(typeof q1)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<h3>Question #1</h3>
<label for="exampleSelect1">Question?</label>
<select class="form-control" id="q1">
<option value = "1" >1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "4">5</option>
</select>
</div>
<button type="submit" id="submitBtn">Submit</button>