2016-06-02 21 views
-1

Ich bin ziemlich neu in der Programmierung (gestern gestartet) und bis jetzt habe ich nur einen sehr einfachen Code erstellt. Ich bin zur Zeit nicht bewusst, wie man es machen, damit ich eingeben klicken und es wird das Forum Post einreichen, um alle Befehle auf, wie das möglich zu machen, wären sehr dankbar :)Verknüpfen von Tasten mit Code

<!DOCTYPE html> 
<html> 
<head> 
<title>Title Changing Simulator!</title> 
<script type="text/javascript"> 
function substitute() { 
var myValue = document.getElementById('myTextBox').value; 

if (myValue.length == 0) { 
alert('Please enter a real value in the text box!'); 
return; 
} 
var myTitle = document.getElementById('title'); 
myTitle.innerHTML = myValue; 

} 
</script> 
</head> 
<body> 
<h1 id="title">Title Changing Simulator!</h1> 

<input type="text" id="myTextBox" /> 
<input type="submit" value="Click My Button" onclick="substitute()" /> 
</body> 
</html> 
+0

Zur CodeSchool.com und nimmt einen ihrer kostenlosen Kurse auf Web-Programmierung. Schienen für Zombies ist eine gute Wahl, oder die für Node. Sie benötigen eine Art serverseitige Logik, die die Informationen erhält, die Sie veröffentlichen möchten. Einer dieser Kurse hilft bei den Grundlagen. Viel Glück – Paul

+1

Dies aktualisiert das Titelelement h1. Was hast du versucht zu erreichen? –

+0

mit 'click enter' meinst du 'type enter', oder? –

Antwort

0

Wickeln Sie Ihre Eingabe und Schaltfläche in einem <form> und achten Sie auf das Ereignis submit des Formulars, das entweder durch Klicken auf die Schaltfläche Senden oder durch Drücken der Eingabetaste im Eingabefeld ausgelöst wird. Siehe auch How to trigger enter key press of textbox?

const form = document.getElementById('form'); 
 
const text = document.getElementById('text'); 
 
const title = document.getElementById('title'); 
 

 
form.addEventListener('submit', event => { 
 
    event.preventDefault(); 
 

 
    if (text.value.length > 0) { 
 
    title.textContent = text.value; 
 
    } else { 
 
    alert('Please enter a real value in the text box!'); 
 
    } 
 
});
<h1 id="title">Title Changing Simulator!</h1> 
 

 
<form id="form"> 
 
    <input type="text" id="text"> 
 
    <input type="submit" value="Update"> 
 
</form>

Verwandte Themen