11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Coller un input dans une phrase

Bonjour!

Voilà mon problème:

J'ai fais une page où l'utilisateur doit créer un personnage, et commence par rentrer le prénom de celui-ci. Ce que j'aimerai faire, c'est copier le prénom que l'utilisateur a tapé et l’insérer dans une phrase, sur une autre page, qui dirait par exemple "Nice to meet you "nomDuPerso"".

Voici mes codes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Character Sheet</title>
</head>
<body>
   <div class="title">
       <h1>Character Sheet Editor v1.0.0</v1></h1>
       <h2>You are about to start your journey...</h2>
       <p class="p1">First of all, we need your name stranger!</p>
   </div>
    <div class="formName">   
    <form action="index2.html" name="form1" method="GET">
        <input id="GetName" type="text" name="name" placeholder="Ulrich Dustmaker" required>
        <input id="subName" type="submit" value="Is My Name!" onclick="copyName()">
    </form>
    </div>
   </div>


<script src="script.js"></script>
</body>
</html>


Le code de la seconde page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Character Sheet</title>
</head>
<body>
    <div class="title2">
        <p id="p1">Nice to meet you <span id="output"></span></p>
    </div>

<script src="script.js"></script>   
</body>
</html>


Et le peu de JS que j'ai jusqu'à maintenant... 

function copyName(){
    let copyText = document.getElementById("GetName");
    copyText.select();
    document.execCommand("copy");
}


Merci d'avance à celles et ceux qui jetteront un coup d’œil à tout ça Smiley biggrin
Hello,

voici une façon de procéder ( version simple, avec passage dans l'url )

HTML 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Character Sheet</title>
</head>
<body>
   <div class="title">
       <h1>Character Sheet Editor v1.0.0</v1></h1>
       <h2>You are about to start your journey...</h2>
       <p class="p1">First of all, we need your name stranger!</p>
   </div>
    <div class="formName">   
	<input id="GetName" type="text" name="name" placeholder="Ulrich Dustmaker" required>
	<button id="subName" onclick="window.location.href = './page2.html?name=' + GetName.value;">CLICK</button>
    </div>
   </div>

</body>
</html>


HTML 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Character Sheet</title>
	<script>
		document.addEventListener('DOMContentLoaded', function(){
		
			getUrlParam();
		
		});
		
		const getUrlParam = function () {

			const queryString = window.location.search;
			const urlParams = new URLSearchParams(queryString);
			const urlParamExists = urlParams.get('name')

			output.innerText = urlParamExists ? urlParamExists : "Aucun nom entré !";

		};
	</script>
</head>
<body>
    <div class="title2">
        <p id="p1">Nice to meet you <span id="output"></span></p>
    </div>
  
</body>
</html>
Ça fonctionne! C'est super, merci beaucoup!
Je vais prendre un peu de temps pour étudier tout ça maintenant Smiley cligne
Merci encore, bonne fin de journée à vous!
Sujet clos
Aller à