CODEWITHSUNDEEP
javascripthtml
user9217262
user9217262

Reputation: 35

Adding a string variable inside an html code

i have an html block that contains few buttons and one text input. The placeholder of this text input should be changed in the different situations. Therefore i add a string variable. Then i put the html inside in another string variable: 

var dataType;

var htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=${dataType}>`

as you can see, in the last line of html code, i added ${dataType} in the placeholder part.

then i use it with these codes:

if (document.getElementsByClassName('.js-phone'))
{
  dataType = "Add your number "
  this.html = this.phone.html();
  this.phone.html(
    htmlBlock
  )
};

after compiling, in the text input placeholder, this text appears: undefined

Could anyone help me that how i can do it? Your help will be appreciated.

Upvotes: 0

Views: 62182

Answers (4)

Andrew Ymaz
Andrew Ymaz

Reputation: 2203

In your case, your dataType variable should be defined before you will use that variable in your string literal (template):

var dataType = 'HELLO';
var htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;

console.log(htmlBlock);

UPDATED:

in this case you could do:

var getHtmlBlock = function(dataType) {
    return `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div><div class="icon add big toleft"><i class="fas fa-check-circle"></i></div><input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
};

var myDataType =  getHtmlBlock('Add your number');
console.log(myDataType); // replaced string with argument value;

Put your string into function, and replace ${dataType} by passing as argument.

Upvotes: 1

Doug
Doug

Reputation: 1515

You can turn your htmlBlock variable into a function that receives an argument "dataType" and returns the html data string that you'd like.

This is a simplified version of your JavaScript:

  • tests IF there is an element with the className 'js-phone'
  • triggers a window prompt to ask the user for information (a phone number)
  • then that info is saved to a variable 'dataType'
  • that variable is passed into the htmlBlock function
  • which in turn, returns the html data string with the new value

function htmlBlock( dataType ){
  // the important keyword here is "return" ...
  // when this function is called, it will give back
  // (or return) the html string described here
  return `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
}

if (document.getElementsByClassName('js-phone')){
  // window.prompt will return the value put in by the 
  // user -- this assigns that returned value to a 
  // variable named dataType
  var dataType = window.prompt('What is your phone number?');
  // this is just grabbing the first element with the
  // 'js-phone' class and adding the html data from
  // the htmlBlock() function
  document.getElementsByClassName('js-phone')[0].innerHTML = htmlBlock( dataType );
  // the key here is the call to htmlBlock( dataType )
  // we got dataType from the prompt
  // and the htmlBlock is our function written above.
};
<div class="js-phone"></div>

Upvotes: 1

Nathanael
Nathanael

Reputation: 194

You need to close your string before referencing other JavaScript variables. Then concatenate the strings with the '+' operator and finish the tag. For example:

var htmlBlock = '...<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=' + dataType + '>';

Anything in the quotes will be treated as just characters, not program code.

Upvotes: 0

HyperTextCoffeePot
HyperTextCoffeePot

Reputation: 448

Your placeholder needs to be wrapped in double quotes "". If you need $(dataType) to place the value in as a placeholder (I'm assuming as jQuery value) you'll need to concatenate the string like this:

placeholder="' + dataType + '"

Don't miss the single quotes between the double quotes you're concatenating. It looks like you're trying to both get and set a value using jquery. It's better to get the value of an object, e.g. $(myVal).val(), then use the variable to set it into your other code.

Upvotes: 1

Related Questions