Click here to Skip to main content
13,249,813 members (82,968 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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://support.google.com/adwords/answer/3265299?hl=en </p>
        <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>
Posted 7-Nov-17 0:29am
Updated 7-Nov-17 7:16am
Thanks7872135.7K
v3
Comments
Thanks7872 7-Nov-17 5:40am
   
And what is the question?
Member 13507633 7-Nov-17 6:19am
   
The question is how do i create an input field and move what is inside the input field to the h3 tag etc.
Thanks7872 7-Nov-17 6:38am
   
http://lmgtfy.com/?q=change+h3+text+javascript
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You could use a <textarea> or <input> element. You have to give it an identity so you can retrieve it's value via javaScript. Although normally used in <form>'s, they don't have to be used in that context.

You then need, as well, to decide what event will trigger moving the text. A button with an onclick event [just as inconvenient as input()], onblur ? The latter could be annoying, but it does save the button click.


  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

in javascript:
document.getElementById('idofh3').innerHTML=document.getElementById('idofinput').value;
triggered by a click event on a button which should be in an event handler, not inline.

If you want it really dynamic they you could use the keyup event on the input for the eventhandler, and then it would update with each key stroke.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web03 | 2.8.171114.1 | Last Updated 7 Nov 2017
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100