Задание: Создать веб-страницу для работы с текстом. Страница состоит из поля многострочного текстового ввода, флажков для выбора способа выделения (курсив, жирный, подчеркивание) и кнопки. После нажатия кнопки на страницу выводится введенный в поле текст, выделенный выбранным способом (например, жирным шрифтом). Ниже в таблице выводятся сведения о количестве цифр, символов, слов и предложений во введенном тексте. Словом считать набор символов, разделенный пробелами. Предложением считать набор символов с точкой на конце.
В 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>
|
Код:
|
* {
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;
} |