How do I control the output of HTML input inside of a h3 tag.

Question

0.00/5 (No votes)

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 6-Nov-17 23:29pm

Member 13507633

Updated 7-Nov-17 6:16am

Thanks7872

v3

Add a Solution

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

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

W∴ Balboos, *GHB* · Accepted Answer · 2017-11-07T01:05:00

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.

COBOLdinosaur · Accepted Answer · 2017-11-07T06:13:00

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.

How do I control the output of HTML input inside of a h3 tag.

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0