Я пытаюсь написать свою первую программу на JS, однако я застрял при получении пользовательского ввода из формы и отображении его после того, как пользователь нажал кнопку (mot1 и mot2).Я мог бы подумать, что это из области ввода, но я совершенно новичок в JS, и я попробовал другой сценарий для сохранения ввода без какого-либо результата.
Я пытался использовать:
var mot1 = ('input1').val();
или
document.getdocumentById('output1').value;
Никто из них не возвратил значение, записанное в mot1, я даже не уверен, как мне следует подойти к проблеме, для меня, я говорю, что значение mot1 должно быть прочитано и сохранено, затем отобразите в «оповещении».
// bouton clickable
const button = document.querySelector("btn-lg");
//Récupère le mot n*2
var mot2 = ('Deuxième truc');
var index = i1;
// stock le résultat
function getmot() {
//Récupère le mot n*1
var mot1 = ('Premier truc').val();
}
function checker() {
// Indique à l'utilisateur si les champs sont vides
if (checkForMissingInput(false)) {
alert('Fais un effort mon pote')
} else {
writeResult("output1")
}
}
button onclick = function WriteResult() {
// écrit le résultat
alert(mot1);
}
<!doctype html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width = device-width, initial-scale = 1" />
<title>Generateur</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="style" type="text/css" href="applistyle.css">
<script src="scriptmot.js" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2> Générateur de mots stylés </h2>
<form class="form-inline">
<input type="text" class="form-control" maxlength="20" id="i0" placeholder="Premier truc" />
<input type="text" class="form-control" maxlength="20" id="i1" placeholder="Deuxième truc" />
</form>
<br />
<br />
<button type="button" class="btn-lg" id="submit" onClick=>Bang!</button>
<br />
<br />
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Résultat :</span>
</div>
<textarea id="output1" rows="1" class="form-control" />
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" />
</body>
</html>
Заранее спасибо