Работы с input - ами через js

112

15 апреля 2021, 10:10

Всем привет. Вот познаю js и в результате работы сталкнулся со следующий проблемой.

Написать функцию, у которой 2 параметра – строка s и целое число n. Функция возвращает строку, с удаленными n символами с начала и конца строки

<p>введите строку</p><input type="text" id="str"> 
<p>введите число удаления символов</p><input type="text" id="int"> 
<p id="paragraph">Результат</p> 
<script defer> 
  let stroka = document.getElementById("str").value; 
  let chislo = parseInt(document.getElementById("int").value); 
  let par = document.getElementById("paragraph"); 
 
  function funcfortrim(st, ch) { 
    par.innerHTML = st.slice(ch, ch); 
  } 
</script> 
<button id="butres" onclick="funcfortrim(stroka, chislo);">button</button>

Здесь при нажатии на кнопку должна вызываться функция, которая обрезает строку по параметрам и выбрасывает это в параграф.

Но когда я нажимаю на кнопку в параграф ничего не выбрасывается, там просто вместо "Результат" появляется пустое поле ("Результат" пропадает и всё).

Укажите пожалуйста на проблему. Может быть я не правильно обрезаю строку? Хотя я думаю, что у меня не считывается stroka из input, потому что я делал проверку и пытался вывести stroka.length, но он выводил на экран 0.

Вообщем помогите пожалуйста исправить эту проблему, буду очень признателен

Answer 1

function funcfortrim() { 
  let stroka = document.getElementById("str").value; 
  let chislo = parseInt(document.getElementById("int").value); 
  let par = document.getElementById("paragraph"); 
  par.innerHTML = stroka.slice(chislo, -chislo); 
}

<p>введите строку</p><input type="text" id="str"> 
<p>введите число удаления символов</p> 
<input type="text" id="int" /> 
<p id="paragraph">Результат</p> 
 
<button id="butres" onclick="funcfortrim();">button</button>

Answer 2

Вы неправильно использовали функцию slice, должно быть так:

par.innerHTML = st.slice(ch, st.length - ch);

Получается вы возьмете строку по индексу от введенного числа до максимальной длины строки - переданное число

Плюс переписал код, т.к. ваш код все равно работать не будет, т.к. значения stroka и chislo у вас всегда будут "" и NaN

<p>введите строку</p><input type="text" id = "str"> 
<p>введите число удаления символов</p><input type="text" id = "int"> 
<p id="paragraph">Результат</p> 
<script defer> 
function trimString(){ 
	let stroka = document.getElementById("str").value; 
	let chislo = parseInt(document.getElementById("int").value); 
 
	funcfortrim(stroka, chislo); 
} 
 
function funcfortrim(st, ch){ 
	var par = document.getElementById("paragraph"); 
	par.innerHTML = st.slice(ch, st.length - ch); 
} 
</script> 
<button id="butres" onclick="trimString();">Trim</button>

А если прям по ТЗ делать, то сама функция не должна ничего делать с параграфом, а всего лишь должна возвращать значение:

<p>введите строку</p><input type="text" id="str"> 
<p>введите число удаления символов</p><input type="text" id="int"> 
<p id="paragraph">Результат</p> 
<script defer> 
function trimString(){ 
	let str = document.getElementById("str").value; 
	let number = parseInt(document.getElementById("int").value); 
	let par = document.getElementById("paragraph"); 
	 
	par.innerHTML = applyTrim(str, number); 
} 
 
function applyTrim(s, n){ 
	return s.slice(n, s.length - n); 
} 
</script> 
<button id="butres" onclick="trimString();">Trim String!</button>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как передать контекст?

Допустим есть такой React-компонент, вопрос в том, как передать контекст вызова отсюда:

javascript

Отпимизация скрипта

Всем приветсейчас будет очень тупой вопрос

117

javascript

Как узнать, какой элемент вызвал функцию?

К примеру есть два элемента <input type="range">, которые вызывают одну и туже функцию (с помощью oninput="")В зависимости от того, какой именно input вызвал...

106

javascript

Почему не срабатывает событие скролла?

Имеется такой компонент:

137