0

It works this way: when I click a subscribe button, it shows a message:

<span id="es_msg">
Your subscription was successful! Kindly check your mailbox and confirm your subscription. If you don't see the email within a few minutes, check the spam/junk folder.</span>

And I have to change this message using javascript cause I don't have access to the html. I tried to use the code below, but the message "Test" becomes always visible even before I click the subscribe button.

document.getElementById('es_widget_msg').innerHTML='Test';
Improve this question
2
  • document.getElementById('es_msg').innerHTML='Test' Commented Sep 2, 2018 at 16:57
  • 1
    What is ID es_widget_msg ? Commented Sep 2, 2018 at 17:17

3 Answers 3

Reset to default
1

That's because you didn't set the code up to be part of an "event handler". It's running without any user involvement, as soon as it's encountered. You said yourself you want the text to change when the span gets clicked.

// Get a reference to the span
let span = document.getElementById("es_msg");

// Set up a click event that references the correct event handling function
span.addEventListener("click", doClick);

// Define the handler function
function doClick(){
  // In the DOM handler, the element that caused the event
  // is available via the keyword "this". Also, if you are not
  // modifying the HTML content of an element, use .textContent
  // not .innerHTML
  this.textContent = 'Test';
}
<span id="es_msg">
Your subscription was successful! Kindly check your mailbox and confirm your subscription. If you don't see the email within a few minutes, check the spam/junk folder.</span>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I forgot to say that this message just appears when I click a button and its ID is #es_txt_button. So, when I click the button, the span text changes.
@Lucky Isn't that what you want? That's what my code does.
0

You can store the msg inside the data-* attribute of an element.

var $el_btn = $("#es_txt_button");
var $el_msg = $("#es_msg");

$el_btn.on("click", function(e) {
  e.preventDefault();
  // submit to backend and on succes do:
  $el_msg.text($el_msg.data("msg"));
})
<button id="es_txt_button">Subscribe</button>
<span id="es_msg" data-msg="Your subscription was successful!"></span>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

or in plain JS

const el_btn = document.querySelector("#es_txt_button");
const el_msg = document.querySelector("#es_msg");

const subscribe = (e) => {
  e.preventDefault();
  // submit to backend and on succes do:
  el_msg.textContent = el_msg.getAttribute("data-msg");
};

el_btn.addEventListener("click", subscribe);
<button id="es_txt_button">Subscribe</button>
<span id="es_msg" data-msg="Your subscription was successful!"></span>

Improve this answer

3 Comments

Why show a submit button and then need to use .preventDefault() when this clearly isn't a form situation?
dear @ScottMarcus 1. read when I click a subscribe button. 2. How does e.preventDefault() hurts? If there's a form it can only help.
Dear @Roko 1) subscribe !== submit 2) It hurts because it's more code and processing than may be necessary.
0

You try below jQuery code..

$('body').on('click', '#subscribeId', function() {
    $('body').find('#es_msg').text('Test');
});

If you do not use a event handling machanisum in doing this the code you have add will work on page load and rewrite the message as 'Test' very early than you expecting. So that, you have to add handler. Here we handle the click on the subscribe button with the subscribe button Id or the class name. In this case the action will take place only if the event happens, ie. Your click on button.

Hope this helps you.

Improve this answer

1 Comment

Answers should explain what the problem is and how the supplied code solves the problem. They shouldn't just be "try this".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.