Guide on how to send a variable from JavaScript to an HTML string

Question

Guide on how to send a variable from JavaScript to an HTML string

I am encountering an issue in passing a variable to the inline JavaScript.

var namealert = key;

     $("#alerta").append("<div class='alert_item clearfix'><a href='#' id='delete_alert' onclick='localStorage.removeItem('" +namealert+ "'');'><img width='15px' style='margin-right:10px;opacity: 0.5;' src='img/error.png'></a><div class='date'>"+obj['0']+"</div><br><div class='title'>"+obj['1']+"</div><br><div class='msg'>"+obj['2']+"</div><br><a href='#' id='candidatar' onclick='candidatar()'><img width='100px' style='margin-right:10px;opacity: 0.8;' src='img/disponivel.png'></a></div>");

The current output shows:

<a href="#" id="delete_alert" onclick="localStorage.removeItem(" alerts_1481117090'');'>...</a>

I require it to display as

localStorage.removeItem('alerts_1481117090')

;

javascript

Answer 1

Answer №1

Many people have disagreed with your approach, but few have provided a clear example of what we mean by "adding event handlers". The onclick method you are using is technically an event handler, although not the best way to achieve your goal.

var $newElement = $("#alert")
.append("<div class='alert_item clearfix'>Click me!</div>");
    
// $newElement is a jQuery object returned by .append()

// set a click event handler. this is much better than doing the html
// onClick method you had in your question, because it requires no
// stringified javascript code evaluation.

$newElement.on("click", function (ev) {
alert("Hey, I was clicked! " + ev.target);
    // your local storage code here instead
});

.alert_item {
  background-color: red;
}

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

<div id="alert">
<!-- elements to append here -->
</div>

It appears that you are just starting to learn javascript, so keep at it. While it may seem daunting at first, there is a helpful resource called "JavaScript, the Good Parts" that explains how to use the language effectively and safely.

Answer 2

Many people have disagreed with your approach, but few have provided a clear example of what we mean by "adding event handlers". The onclick method you are using is technically an event handler, although not the best way to achieve your goal.

var $newElement = $("#alert")
.append("<div class='alert_item clearfix'>Click me!</div>");
    
// $newElement is a jQuery object returned by .append()

// set a click event handler. this is much better than doing the html
// onClick method you had in your question, because it requires no
// stringified javascript code evaluation.

$newElement.on("click", function (ev) {
alert("Hey, I was clicked! " + ev.target);
    // your local storage code here instead
});

.alert_item {
  background-color: red;
}

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

<div id="alert">
<!-- elements to append here -->
</div>

It appears that you are just starting to learn javascript, so keep at it. While it may seem daunting at first, there is a helpful resource called "JavaScript, the Good Parts" that explains how to use the language effectively and safely.

Guide on how to send a variable from JavaScript to an HTML string

Answer №1

Similar questions

Adjust the minimum and maximum values of the Y-axis based on the scale of the X-axis

JavaScript threw a SyntaxError: Unexpected character in line 1 while trying to parse JSON

Trouble with Bootstrap 5 hidden elements and jQuery fading in and out smoothly

Executing a search and obtaining XML data from an external source

Issues with Twitter-Bootstrap Modal Functionality

Guide to effortlessly loading files with designated decorators in a node.js application

Updates to class variable values in jQuery are failing to take effect

Tips for preserving textarea content upon clicking outside the area with the help of ajax

Having trouble with the postcss-import grunt plugin?

What is the best way to toggle between different sections of a webpage using HTML, CSS, and Javascript?

Failure in importing a custom CommonJS module

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

Extract JSON data from Python API

Click event triggers dynamic function call

"Converting Text from a Streamed XML-Like File into CSV: A Step-by-Step Guide

What is the process for adding an event listener in React?

What is the best way to change a double-quoted integer into an integer?

Utilizing the progress or meter tag in combination with a reactive value

Enhancing live query functionality and providing a substitute for DOMNodeInserted specifically tailored for

Change the color of a specific object in three.js using the dat.GUI color picker