Блог

Главная - Вопросы по программированию - Создание кнопки, которая выводит приветствие

Создание кнопки, которая выводит приветствие

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в программировании, и мне нужна помощь в интеграции javascript и html. Я пытаюсь создать html-страницу с разделом ввода имени и кнопкой отправки, чтобы отправить приветствие из функции в файле javascript. Я пробовал использовать теги form и input и задавался вопросом, как вывести на HTML-страницу.

Заранее благодарю вас.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test button</title>
    <script src="./script.js"></script>
</head>
<body>
    <form name="testbutton" action="" method="GET">Enter your name</form>
    <input type="text" name="inputbox" value="">
    <input type="button" name="button"  value="click" onclick="greetings(this.form)" id="">
    <h1></h1>
</body>
</html>
 
 function greeting(a) {
    return "Hello "   a   ", nice to meet you"
}

Ответ №1:

Используемые ключевые API-интерфейсы:

Смотрите Комментарии HTML и JavaScript:

 // This is what is in script.js

// Don't use inline event attributes like onclick.
// Keep JavaScript out of your HTML.
// Set up your events in JavaScript
document.querySelector("input[type='button']").addEventListener("click", greeting);

// Get references to the elements you'll need:
let input = document.querySelector("input");
let output = document.querySelector("h1");

function greeting() {
    // Place your output in an existing HTML element
    output.textContent = "Hello "   input.value   ", nice to meet you";
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test button</title>
</head>
<body>
    <!-- No need for a <form> if you're not submitting data anywhere. -->
    Enter your name
    <!-- No need to set value="", that's the default.
         No need to set type="text", that's also the default.
         And no need to set name="..." if you're not submitting data. -->
    <input>
    <input type="button" value="click">
    <h1></h1>
    
    <!-- Add your script references just before the closing
         body tag so that by the time the script is encountered
         all the HTML elements will have been parsed into memeory. -->
    <script src="./script.js"></script>
</body>
</html>

Ответ №2:

Вы хотите что-то подобное?

 function alpha(){
  var str=document.getElementById('input1').value;
  str ===""? str = "Maria":null;
  console.log(str);
  alert(greeting(str));
}


function greeting(a) {
    return "Hello "   a   ", nice to meet you"
} 
 <input type="text" id="input1" />
<button onclick="alpha()" value="Maria">Click Me</button>

Комментарии:

1. Да, спасибо! не могли бы вы объяснить использование функции «альфа», пожалуйста?

2. Вместо 2 я мог бы добавить весь код только в 1 функцию, но я думал, что вы в любом случае хотите function greeting() вернуть значение. Итак, я использовал две функции, вместо этого вы могли бы написать alert("Hello " a ", nice to meet you") непосредственно только в alpha() , вместо вызова greeting() , а затем удалить 2-ю функцию — приветствие () .