Добавить первую заглавную букву для ввода и массива (Javascript)

Я бы хотел, чтобы пользователь вводил свои собственные фрукты, а также имелся набор фруктов. Я разберусь с этим, но перед этим я хотел бы сделать первый символ каждого слова заглавной буквой, а затем выплюнуть его в html с «with» в каждой записи. Я не уверен, что на правильном пути. Любая помощь приветствуется! Благодарность

let fruits = ["banana", "orange", "apple", "kiwi"];

function addFruits () {
let fruitInput = prompt ("Please Enter More Fruits").toLowerCase().split(" ");
let fruitsAdded = fruits.push(fruitInput);
let fruitsPushed = fruitsAdded.map(
    function(value){ 
        return value.replace(value.charAt(0), value.charAt(0).toUpperCase());
    });
fruits.sort();
document.getElementById("sortedFruits").innerHTML = fruits.join(" with ");

javascript arrays string function

19.10.2018 14:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

    function Firstupchar(letter) {
        return letter[0].toUpperCase() + letter.substring(1).toLowerCase()
    }

["one","two"].map(c => Firstupchar(c) ).join(" with ")

Спасибо за этот фрагмент кода, который может предоставить некоторую немедленную помощь. правильное объяснение значительно улучшило бы его долгосрочную ценность, показывая Почему, это хорошее решение проблемы, которое сделает его более полезным для будущих читателей с другими похожими вопросами. Пожалуйста, редактировать свой ответ, чтобы добавить некоторые пояснения, включая сделанные вами предположения.

— 19.10.2018 15:45

19.10.2018 14:35

Для меня это помогает немного разбить вещи. Вы хотите ввести данные и обновить список, а затем отформатировать этот список для отображения. Я добавил список и триггер события, чтобы упростить демонстрацию.

// set up your list of fruit and the handles for your event/render
let fruits = ["banana", "orange", "apple", "kiwi"];
const wrapper = document.querySelector('#sortedFruits');
const button = document.querySelector('#add_button');

const render = () => {
  // build (and sort) a list from the fruits array
  const list = fruits
    .sort()
    // uppercase the first character and ensure the rest are lower
    .map(str => str.slice(0,1).toUpperCase() + str.slice(1).toLowerCase())
    // format item for render
    .map(fruit => `<li>${fruit}</li>`)
    .join('');
  
  // replace list with new list
  wrapper.innerHTML = list;
}

const addFruits = () => {
  // take user input
  const input = prompt('Please enter more fruit')
  // build array of fruit to add
  const newFruit = input
    .toLowerCase()
    .split(' ');
  
  // update fruit list
  fruits = [ ...fruits, ...newFruit ];
  // show updated list
  render();
}

// initial list
render();
// add event handler to trigger fruit addition
button.addEventListener('click', addFruits);

<section>
  <input type = "button" name = "add_fruit" value = "Add More Fruit!" id = "add_button" />
  <ul id = "sortedFruits"></ul>
</section>

Также работает, спасибо за помощь !!

— 19.10.2018 16:08

19.10.2018 14:54

Ответ принят как подходящий

Я взял ваш код, и он работает

толкая значения массива с помощью синтаксис распространения ..., чтобы получить все элементы как отдельные параметры,
удаление присвоения Array#push, потому что он возвращает новую длину массива, а не новый массив или данный массив,
перемещение сортировки выше, потому что здесь вам нужен отсортированный массив,
теперь получаю заглавные слова из fruits
внутри обратного вызова для Array#map возьмите первый символ как строку в верхнем регистре и resz строки с String#slice.

function addFruits() {
    let fruitInput = prompt("Please Enter More Fruits").toLowerCase().split(" ");
    fruits.push(...fruitInput);
    fruits.sort();
    let upperCased = fruits.map(function(value) {
        return value[0].toUpperCase() + value.slice(1);
    });
    document.getElementById("sortedFruits").innerHTML = upperCased.join(" with ");
}

let fruits = ["banana", "orange", "apple", "kiwi"];
addFruits();