The intention is to make these two <H4> titles editable, but unfortunately I am only able to apply in the first <H4>

Asked

Viewed 57 times

-2

window.onload = function() {
  function editTitle() {
    var choices = []
    var title = document.getElementsByTagName('h4')[0];

    var span = title.firstChild;

    span.onmouseover = function() {
      this.title = 'Clique para editar o texto';
      this.style.background = '#f5f5f5';
    }
    span.onclick = function() {
      var textoAtual = this.firstChild.nodeValue;
      var texto = this.firstChild.nodeValue;
      var input = '<input ="text" name="1" value="' + textoAtual + '">';
      this.innerHTML = input;
      var field = this.firstChild;
      this.onclick = null;
      this.onmouseover = null;

      field.select();
      field.onblur = function() {
        this.parentNode.innerHTML = this.value;
        editTitle();
      }
    }
  }
  editTitle();
}
h1 {
  font: normal 2.4em/1.6 georgia, "sansation", "bitstream vera serif", times, serif;
  color: #900;
}

* {
  margin: 0;
  padding: 0;
}

.informativo h1 {
  top: auto;
  float: right 1000px;
  font-weight: bold;
  font-size: 20px;
  color: black;
  font-family: arial;
  padding: 1px;
}

.informativo img {
  float: left;
  height: 156px;
  width: 220px;
}

.informativo p {
  font-size: 15px;
  font-family: arial;
  padding-bottom: 8px;
}

.informativo p2 {
  font-size: 10px;
  font-family: arial;
}

.informativo h2 {
  font-family: arial;
  font-size: 15px;
  padding: 5px;
}

.informativo h3 {
  font-family: arial;
  font-size: 20px;
}

.informativo h4 {
  font-family: arial;
  font-size: 15px;
  padding-bottom: 12px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Informativo de vencimento</title>
</head>

<body>

  <div class="informativo">
    <h1>Bom dia,</h1>

    <p>
      Prezado cliente; Informamos que seu próximo boleto vencera dia:</p>

    <h4><span>Altere a data aqui</span></h4>

    <h3>Detalhe do titulo abaixo. </h3>

    <h4><span>Altere o título aqui</span></h4>


    <p2><span>Caso não tenha recebido o boleto , entrar  em contato  por este mesmo email para  que  possamos envia-lo em tempo hábil para pagamento .
    
        </span> </p2>

  </div>



</body>

</html>

javascript html

  • Please edit your question with more information, paste the code just without saying where you need help, you won’t get much help.

  • var title = document.getElementsByTagName('h4')[0] would not be the problem here?

2 answers

1

I added a for to iterate all tags <h4>

window.onload = function() {
  function editTitle() {
    var choices = []
    var titles = document.getElementsByTagName('h4');

    for (var i = 0; i < titles.length; i++) {
      var title = titles[i]



      var span = title.firstChild;

      span.onmouseover = function() {
        this.title = 'Clique para editar o texto';
        this.style.background = '#f5f5f5';
      }
      span.onclick = function() {
        var textoAtual = this.firstChild.nodeValue;
        var texto = this.firstChild.nodeValue;
        var input = '<input ="text" name="1" value="' + textoAtual + '">';
        this.innerHTML = input;
        var field = this.firstChild;
        this.onclick = null;
        this.onmouseover = null;

        field.select();
        field.onblur = function() {
          this.parentNode.innerHTML = this.value;
          editTitle();
        }
      }
    }
  }
  editTitle();
}
h1 {
  font: normal 2.4em/1.6 georgia, "sansation", "bitstream vera serif", times, serif;
  color: #900;
}

* {
  margin: 0;
  padding: 0;
}

.informativo h1 {
  top: auto;
  float: right 1000px;
  font-weight: bold;
  font-size: 20px;
  color: black;
  font-family: arial;
  padding: 1px;
}

.informativo img {
  float: left;
  height: 156px;
  width: 220px;
}

.informativo p {
  font-size: 15px;
  font-family: arial;
  padding-bottom: 8px;
}

.informativo p2 {
  font-size: 10px;
  font-family: arial;
}

.informativo h2 {
  font-family: arial;
  font-size: 15px;
  padding: 5px;
}

.informativo h3 {
  font-family: arial;
  font-size: 20px;
}

.informativo h4 {
  font-family: arial;
  font-size: 15px;
  padding-bottom: 12px;
}
<div class="informativo">
  <h1>Bom dia,</h1>

  <p>
    Prezado cliente; Informamos que seu próximo boleto vencera dia:</p>

  <h4><span>Altere a data aqui</span></h4>

  <h3>Detalhe do titulo abaixo. </h3>

  <h4><span>Altere o título aqui</span></h4>


  <p2><span>Caso não tenha recebido o boleto , entrar  em contato  por este mesmo email para  que  possamos envia-lo em tempo hábil para pagamento .

    </span> </p2>

</div>

  • Thank you so much! sent so much xD Thank you from my heart

  • For nothing, if the answer solved your question, mark it as resolved, thank you.

1

Just for the record Html5 has the attribute contenteditable which make text elements editable: 

h4 {
  outline: none;
}
<div class="informativo">
  <h1>Bom dia,</h1>

  <p>
    Prezado cliente; Informamos que seu próximo boleto vencera dia: </p>

  <h4 contenteditable><span>Altere a data aqui</span></h4>

  <h3>Detalhe do titulo abaixo. </h3>

  <h4 contenteditable><span>Altere o título aqui</span></h4>


  <p2><span>Caso não tenha recebido o boleto , entrar  em contato  por este mesmo email para  que  possamos envia-lo em tempo hábil para pagamento .</span></p2>

</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.