I have commas between my HTML buttons and i don't know where they come from.
The div in which i create the buttons is empty before the buttons are being created.
In my JavaScript, i don't have any commas that could be put between the buttons as you can see below.
Here is a picture:
I create the buttons with JavaScript like so:
var f = "'";
contents[0]='<button class="btn" onclick="check('+ f + randomChar0 + f +');">' + randomChar0 + '</Button>';
contents[1]='<button class="btn" onclick="check('+ f + randomChar1 + f +');">' + randomChar1 + '</Button>';
contents[2]='<button class="btn" onclick="check('+ f + randomChar2 + f +');">' + randomChar2 + '</Button>';
ranNum0 = randomize(2);
document.getElementById("response").innerHTML = contents;
My HTML looks like this before i insert the buttons:
<div id="response" class="center-children">
</div>
And like this after i insert the buttons:
<div id="response" class="center-children">
<button class="btn" onclick="check('B');">B</button>,
<button class="btn" onclick="check('S');">S</button>,
<button class="btn" onclick="check('E');">E</button>
</div>
If i check in the Browser, it looks like this:
I checked my whole JavaScript, even tried to delete all the CSS and HTML but the commas remain there...
Does anyone have a clue what might cause this?
The problem is that you are assigning the string value of your array to .innerHTML and the string value of an array has commas between the elements.
In order to combine the values in your array, use .join():
document.getElementById("response").innerHTML = contents.join('');
Or better yet, don't use string manipulation to create DOM elements.
You're setting innerHTML to be an array, but it's supposed to be a string. Implicitly, .toString() is being called on your array, which leaves commas. Try it out, [1,2,3].toString() evaluates to "1,2,3".
Related
I'm trying to put every new word for title on the new line using js. I tried different ways, but they don't work.
dictionary.title += word.value; - here I add attribute title for my dictionary class with word.value value. It comes together like: "HelloI'mJohn" instead of
"Hello
I'm
John". How can I do that on the new line using JavaScript code?
Use
\n
or
br tag
for new line.
dictionary.title += word.value + "\n";
Like in the above answers as said you can use <br> and \n for the new line but there are many alternative ways you can achieve this for your understand I have written a code where I used a tag which is also called a block element where it takes given width and height and add a new line at the end automatically. There are many block-level elements you can also use for new lines.
let value = document.querySelector(".newInput");
let btn = document.querySelector("button");
let div = document.querySelector(".dictionary");
function storeValues(){
let dictionary = "";
if(value.value){
dictionary += `<p>${value.value}</p>`
}
div.innerHTML += dictionary
}
btn.addEventListener("click", storeValues);
Enter Word: <input type='text' class='newInput'/>
<button type='submit' class='newInput'>Submit</button>
<div class='dictionary'>
<!-- Dicitonary will appear here-->
</div>
I put together a quote machine as an exercise of freecodecamp.com. You click the button, you get a quote. Then, if you want, you can tweet the quote by clicking the "Tweet It" button. I had a lot of trouble figuring out how to get the quote to populate the tweet field. I finally just looked at someone else's code on the issue, and now it is populating.
The problem: it is populating <p> and </p> tags with every quote. Example:
"<p>When typography is on point, words become images.</p>
" Shawn Lukas
It's also annoying that the second set of quotation marks always appears on the line below next to the author's name.
I'm not sure how the tags are getting in there, but I'd like help clearing them out. Here's my code:
HTML
<div id="container">
<div class="content">
<div id="quote" class="triangle-isosceles">
<p>
<span class="msg"></span>
</p>
</div>
<p id="author"><span class="nme"></span></p>
</div>
<button type="button">Get Quote</button>
<a class="twitter-share-button" id="tweet-quote" target="_blank">
<button type="button" class="btn btn-primary">Tweet it!</button>
</a>
</div>
JS
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>
$.ajaxSetup({
cache: false
});
$('button').on('click', function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
var quote = a[0].content;
var author = a[0].title;
$(".msg").empty().append(quote + "<p>— " + author + "</p>")
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + quote + '" ' + author));
});
});
</script>
I'm omitting the CSS. I can't get a jsfiddle to work (never can), but here's the CodePen link: https://codepen.io/dtarvin/pen/pePowj
Update: just found a quote with an apostrophe and got back those numbers instead of the symbol. Not sure how to handle that when the quotes are random.
Thanks!
you have "<p>— " + author + "</p>" in the append code, regarding the html entity code you need to parse the quote to switch them to the normal version. Also you might need to remove tags within the a[0].content variable. if you have no control over what is returned, you may need to do a lot more filtering to catch stuff like this.
Or if you have access to the serverside script, then use this to get the quote and return the cleansed quote.
For instance, if you visit the url https://quotesondesign.com/wp-json/posts you will see the <p> tags within the quote themselves.
So you basically need to clean the content of the content variable.
for instance to remvoe the p tag within the content string try:
var quote = a[0].content.replace(/<p[^>]*>/g, '').replace(/<\/p>/g, '');
If you need these tags in to display then you could add a seperate function that on pressing the tweet it button, will do this for you.
So you have them on the browser but on tweeting its all striped and good on twitter
Try this it work
<script>
$.ajaxSetup({
cache: false
});
$('button').on('click', function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
var quote = a[0].content;
var author = a[0].title;
$(".msg").empty().append(quote + author);
var html = quote + author;
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";
$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent( text ));
});
});
</script>
So I want to show div's text to input value if button clicked. But if the text includes single quote, It doesn't show properly.
<div id="content_comment">It's Yours!</div>
<button id="btn_comment_edit">Edit</button>
// jQuery
$('.btn_comment_edit').click(function(){
$('#content_comment').replaceWith("<form method='post'><input type=text value='"+$('#content_comment').text()+"'></form>")
});
// result
// It' (doesn't show after single quotes)
It should be It's Yours! in input value. How can I display whole statement with single quotes?
You can do something like this
$('#content_comment').replaceWith("<form method='post'><input type=text value='\'' +$('#content_comment').text()+'\'></form>")
The problem is with the usages of single and double quotes. You are also using .btn_comment_edit instead of #btn_comment_edit. Try like following.
$('#btn_comment_edit').click(function () {
$('#content_comment').replaceWith('<form method=post><input type=text value="' + $('#content_comment').text() + '"></form>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_comment">It's Yours!</div>
<button id="btn_comment_edit">Edit</button>
This is how you can do the encoding.
$('.btn_comment_edit').click(function(){
var a = $('#content_comment').text();
a = addslash(a);
$('#content_comment').replaceWith("<form method='post'><input type=text value='"+a+"'></form>")
});
function addslash(iid){
str=iid.replace(/"/g,'\"');
str=iid.replace(/'/g,'\'');
return str;
}
I am generating a clickable list dynamically using jquery. here is the code that generates the list.
for(dayint=0;dayint < day_arr.length;dayint++){
var temp_pass = JSON.stringify(day_arr[dayint]);
//alert(temp_pass);
$("#itin_list").append('<b>Day '+ dayint + ' of Trip from '+ start_n +' to '+ end_n +' </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button><br>');
}
The problem I have is when passing the json array to my sethidddendiv function. The code sample for the function is as below:
window.sethiddendiv = function(str) {
//var nisal = $.parseJSON(str);
alert(str);
}
When the list item is clicked, instead of giving the json array, it alerts "undefined" all the time.
Here is the html that is generated in the page when I inspect element:
<b>Day 0 of Trip from Colombo to Kandy </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button>
What could be the issue here?
I already tried using single quotes for the onclick, but it didnt work. Any help would be very welcome. I'm stuck.
How to add id attribute of an element in HTML as a variable which is declared above in javascript.
jQuery
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)').html('<button type="button" id="what to write here" class ="save_db")>save</button> ');
I want to set id as name.
Thanks
It can be done using simple string concatenation as follows:
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)')
.html('<button type="button" id="'+name+'" class ="save_db">save</button> ');
PS: Also note that your markup contained a seemingly unnecessary closing brace after class attribute. I've removed it in my code.
So you just want a variable inserted into the html string?
table_row.find('td:nth-child(6)').html`(
'<button type="button" id="' + name + '" class ="save_db">save</button> '
)`;
Concatenate name variable to the appending string as ID.
table_row.find('td:nth-child(6)').html('<button type="button" id="'+ name + '"
class ="save_db")>save</button>');
Please follow this code:
table_row.setAttribute("id", "id_you_like");
Please try with the below code snippet.
Let me know if i am not understand your question.
var id = "btn1";
var table_row = $('table').find('tr#'+pid);
var name = table_row.find('td:nth-child(1)').html();
table_row.find('td:nth-child(6)').html('<button type="button" id="'+id+'" class ="save_db")>save</button> ');
Have you tried this? Try using this:
<button type="button" id='"+name+"' class= "save_db">