I am creating some kind of application.
You should be able to put in the title, the description etc.
And then the inserted text should convert to a particulair style configured in my css.
Question: How do i make an input field. Enter the text press enter and then the text wil be posted between the h3 tags.
What I have tried:
I have created a prompt through javascript wich does what i want. but since the prompt is pretty inconveniant i want to do something else. just an input type text field and then after you press and the text get inserted and converted through CSS.
<!DOCTYPE html>
<html>
<head>
<title>Adwords Applicatie</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- beginning of style -->
<style>
#input1 {
width:600px;
height:75px;
border:solid black 1px;
margin-top:20px;
padding:0px;
}
h3 {
padding:0px;
margin:0px;
font-family: arial,sans-serif;
color:#1a0dab;
text-align: left;
cursor: pointer;
font-size:18px;
}
p {
color:rgb(0, 102, 33);
font-size: 14px;
font-style: normal;
height: auto;
width: auto;
text-align: left;
display: block;
font-weight: 400px;
line-height: 16px;
padding: 0px;
margin:0px;
font-family: arial,sans-serif;
white-space: nowrap;
cursor: pointer;
}
.text {
color:rgb(84, 84, 84);
font-size: 13px;
font-family: arial,sans-serif;
text-align: left;
word-wrap: break-word;
font-weight: 400;
line-height: 18.2px;
display: inline;
margin:0px;
padding:0px;
}
</style>
<!-- end of style -->
</head>
<body>
<div id="inputWrapper">
<!-- max 160 karakters in beschrijving -->
<div id="input1">
<h3>Create dynamic display ads - AdWords Help - Google Support </h3>
<p>https:
<span class="text">This article only applies to the previous AdWords experience.
Determine ... For the greatest reach, create responsive dynamic display ads.
Responsive ads can ..</span>
</div>
<div id="input1">
<h3 id="tekst1"></h3>
<p id="p1"></p>
<span id="span1" class="text"></span>
</div>
<div id="input1">
<h3 id="tekst2"></h3>
<p id="p2"></p>
<span id="span2" class="text"></span>
</div>
<div id="input1">
<h3 id="tekst3"></h3>
<p id="p3"></p>
<span id="span3" class="text"><input type="text"></span>
</div>
</div>
<!-- add javscript here -->
<script>
var Adv1 = document.getElementById("tekst1");
var Adv1p1 = document.getElementById("p1");
var Adv2 = document.getElementById("tekst2");
var Adv2p2 = document.getElementById("p2");
var Adv3 = document.getElementById("tekst2");
var Adv3p3 = document.getElementById("p3");
var Connect = new XMLHttpRequest();
var Advertentie1 = Adv1.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var p1 = Adv1p1.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var Advertentie2 = Adv2.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var p2 = Adv2p2.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var Advertentie3 = Adv3.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
var p3 = Adv3p3.textContent += prompt("Wat is de Titel","Voer hier uw titel in");
</script>
</body>
</html>
Submit an article or tip