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

Question

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

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 ");

Answer 1

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

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

Answer 2

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

• , выдвигая значения массива с синтаксисом разброса ..., для получения всех элементов как отдельных параметров,
• удаляет присвоение 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();

<div id="sortedFruits"></div>

Answer 3

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

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