Назначить кнопке обработчик на функцию
Вложений: 1
Задание: Создать веб-страницу для работы с текстом. Страница состоит из поля многострочного текстового ввода, флажков для выбора способа выделения (курсив, жирный, подчеркивание) и кнопки. После нажатия кнопки на страницу выводится введенный в поле текст, выделенный выбранным способом (например, жирным шрифтом). Ниже в таблице выводятся сведения о количестве цифр, символов, слов и предложений во введенном тексте. Словом считать набор символов, разделенный пробелами. Предложением считать набор символов с точкой на конце.
В JS я первый день, поэтому полазив по интернетам я кое что наклепал (т.к. есть опыт в плюсах), но не понимаю, почему кнопка не реагирует на обработчик. Т.е. если просто писать
onclick = alert("HELLO!")
все прекрасно сработает, а если функцию назначать, то фигушки. Что исправить, где копать?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка текста в web</title>
<link href="styles.css" rel="stylesheet">
<style>
textarea { resize: none; }
</style>
</head>
<body>
<div class="content">
<div class = "col">
<div class = "block">
<p>Введите текст</p>
<textarea cols = "100" rows = "10" id="area1" name="text1" required placeholder="Введите текст для обработки, затем выберите стиль текста">
</textarea> </div>
<div class = "block">
<p>Выберите параметры для нового текста:</p>
<p><input type="radio" name="format" value = "bold"> <b>Жирный</b></p>
<p><input type="radio" name="format" value = "italic"> <i>Наклонный</i></p>
<p><input type="radio" name="format" value = "underline"> <ins>Подчеркнутый</ins></p>
<p><button type "button" onclick = "foo()" value = "Обработать текст"> Обработать текст</button> </p>
</div>
</div>
<div class = "col">
<div class = "block">
<p>Здесь появится обработанный текст</p>
<textarea cols = "100" rows = "10" id="area2" name="text2" placeholder="Здесь появится обработанный текст"> </textarea></div>
<div class = "block">
<p>Количество слов в тексте: <textarea id="warea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество предложений в тексте: <textarea id="sarea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество символов в тексте: <textarea id="symarea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество цифeр в тексте: <textarea id="narea" readonly rows = "1" cols = "5"></textarea></p>
<p>Длина текста (в символах): <textarea id="larea" readonly rows = "1" cols = "5"></textarea></p>
</div></div>
</div>
</body>
</html>
<script type="text/javascript">
function isLetter(c) { //проверка символа на букву
return c.toLowerCase() != c.toUpperCase();
}
function isPunc(c) { //проверка символа на конечный знак препинания
return ((c==".")||(c=="!")||(c=="?");
}
function countWords(s){ //посчитать кол-во слов
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s.split(' ').length;
}
function countSentences(s) { //посчитать кол-во предложений
Matcher m = Pattern.compile("\\.\s*[A-ZА-Я]").matcher(s);
int count = 1;
while(m.find()) count++;
return count;
}
function countNumbers(str){ //кол-во цифр
return str.length-str.replace(/\d/gm,'').length;
}
function prnt(area, str){
for(int i = 0; i<str.length; i++){
area.value+=str[i];
}
}
function foo(){
alert ("Hi im start!")
var text1 = document.getElementById("area1").value;
var numcount, wordcount, sentencecount, scount; //кол-во цифер, слов, предложений, символов
numcount = countNumbers(text1);
wordcount = countWords(text1);
sentencecount = countSentences(text1); //предложения
alert("В тексте "+wordcount " слов, "+sentencecount + " предложений и "+numcount+" цифер.")
}
</script>
Код:
* { |
Запускаем программу, нажимаем F12 - Инструменты разработчика и смотрим в консоли ошибочки.
return ((c==".")||(c=="!")||(c=="?");- неправильное количество скобок
Matcher m = Pattern.compile("\\.\s*[A-ZА-Я]").matcher(s);
int count = 1;
while(m.find()) count++;
- из какого языка? java и javascript - разные языкиfor(int i = 0; i<str.length; i++){ - то же самое alert("В тексте "+wordcount + " слов, "+sentencecount + " предложений и "+numcount+" цифер.") - не хватает + |
Исправил ошибки, но все равно не работает:(
|
golifox,
В консоли больше ошибок нет? Что именно не работает? Не выдает никаких результатов подсчета? Как теперь выглядит функция function countSentences(s) { //посчитать кол-во предложений ? |
Ничего не выводит, подозреваю, что возможно нужно как то по другому объявить и вызвать скрипт (функцию). Читал, что есть разница foo() или foo. В моем случае нужно чтобы все выполнилось, а не возвращаемое значение - я это понимаю, но изменения в коде на результат не влияют:)
Функцию я переписал по-простому, считают кол-во знаков препинания, характерных для конца предложения (да, если будет ФИО через точки цикл ошибется, да, я знаю, но заморачиваться не нужно).
function isPunc(c) { //проверка символа на конечный знак препинания
return ((c==".")||(c=="!")||(c=="?"));
}
function countSentences(s) { //посчитать кол-во предложений
var count = 0;
for (var i=0; i<s.length; i++){
if (isPunc(s[i])) count++;
}
return count;
}
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка текста в web</title>
<style>
textarea { resize: none; }
* {
box-sizing: border-box;
}
.content {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 1 auto;
}
.col {
position: relative;
}
.col:first-child {
flex-basis: 50%;
}
.col:last-child {
flex-basis: 50%;
}
.block {
position: relative;
padding: 3rem 3rem;
}
/*---*/
.col:first-child .block:nth-child(odd) {
background: #eee;
}
.col:first-child .block:nth-child(even) {
background: #ddd;
}
/*---*/
.col:last-child .block:nth-child(even) {
background: #eee;
}
.col:last-child .block:nth-child(odd) {
background: #ddd;
}
.section > div {
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<div class = "col">
<div class = "block">
<p>Введите текст</p>
<textarea cols = "100" rows = "10" id="area1" name="text1" required placeholder="Введите текст для обработки, затем выберите стиль текста">
</textarea> </div>
<div class = "block">
<p>Выберите параметры для нового текста:</p>
<p><input type="radio" name="format" value = "bold"> <b>Жирный</b></p>
<p><input type="radio" name="format" value = "italic"> <i>Наклонный</i></p>
<p><input type="radio" name="format" value = "underline"> <ins>Подчеркнутый</ins></p>
<p><button type "button" onclick = "foo()" value = "Обработать текст"> Обработать текст</button> </p>
</div>
</div>
<div class = "col">
<div class = "block">
<p>Здесь появится обработанный текст</p>
<textarea cols = "100" rows = "10" id="area2" name="text2" placeholder="Здесь появится обработанный текст"> </textarea></div>
<div class = "block">
<p>Количество слов в тексте: <textarea id="warea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество предложений в тексте: <textarea id="sarea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество символов в тексте: <textarea id="symarea" readonly rows = "1" cols = "5"></textarea></p>
<p>Количество цифeр в тексте: <textarea id="narea" readonly rows = "1" cols = "5"></textarea></p>
<p>Длина текста (в символах): <textarea id="larea" readonly rows = "1" cols = "5"></textarea></p>
</div></div>
</div>
</body>
<script type="text/javascript">
function isLetter(c) { //проверка символа на букву
return c.toLowerCase() != c.toUpperCase();
}
function isPunc(c) { //проверка символа на конечный знак препинания
return (c==".")||(c=="!")||(c=="?");
}
function countWords(s){ //посчитать кол-во слов
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
return s.split(' ').length;
}
function countSentences(s) { //посчитать кол-во предложений
var count = 0;
for (var i=0; i<s.length; i++){
if (isPunc(s[i])) count++;
}
return count;
}
function countNumbers(str){ //кол-во цифр
return str.length-str.replace(/\d/gm,'').length;
}
function prnt(area, str){
for(var i = 0; i<str.length; i++){
area.value+=str[i];
}
}
function foo(){
alert ("Hi im start!")
var text1 = document.getElementById("area1").value;
var numcount, wordcount, sentencecount, scount; //кол-во цифер, слов, предложений, символов
numcount = countNumbers(text1);
wordcount = countWords(text1);
sentencecount = countSentences(text1); //предложения
alert("В тексте "+wordcount + " слов, "+sentencecount + " предложений и "+numcount+" цифер.")
}
</script>
</html>
|
Цитата:
|
А как это в окошечки выводить? Или так больше смысла оставить?
|
golifox,
В окошечки выводить примерно так же, как и брать из них
<p>Количество предложений в тексте: <textarea id="sarea" readonly rows = "1" cols = "5"></textarea></p>
<script>
var sentencecount = 2;
document.getElementById("sarea").value = sentencecount;
</script>
|
Цитата:
|
Спасибо большое за помощь. Пойду отчет оформлять:dance:
|
Цитата:
<button></button>
<script>
alert(document.querySelector("button").type);
</script>
|
Убрал, а как мне реализовать собственно жирный, курсив или подчеркнутый во второе окошко?
|
Цитата:
|
Цитата:
|
Цитата:
|
golifox,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript</title>
<style>
</style>
</head>
<body>
<textarea >Lorem ipsum dolor sit amet.</textarea>
<input type="checkbox" value="text-decoration:line-through;"><span>перечеркнуть</span>
<input type="checkbox" value="font-weight:bold;"><span>сделать жирным</span>
<input type="checkbox" value="color:red;"><span>сделать красным</span>
<script>
let text = document.querySelector('textarea')
let input = document.querySelectorAll('input')
for(var i = 0; i < input.length; i++){
input[i].addEventListener('change', func)
}
function func(){
var txt = '';
for(var i = 0; i < input.length; i++){
var el = input[i];
if(el.checked) txt += el.value
}
text.style.cssText = txt
}
</script>
</body>
</html>
|
Цитата:
alert(document.createElement("button").type);
рони, подпись рядом с флажком должна переключать его! Рядом с флажком отображается его обозначение, обычно — подпись, реже — значок. Для увеличения площади активного элемента обычно взаимодействие происходит как с самим флажком, так и с подписью к нему. |
Цитата:
|
| Часовой пояс GMT +3, время: 05:20. |