Develop Reference

Display element of array onclick

This code displays the content of JSON file by formatting every word into sentences and then into HTML. On mouseover, words become blue. On click they become red. The next thing I want to do is to display the translation of the words (already in the json array) onclick.
https://jsfiddle.net/ve64qvtm/
var json = [
[
["Peki", "Well"],
["nedir", "what"],
["bu", "it"],
...
]
];
var arr2 = [];
for (k = 0; k < json.length; k++) {
var arr = json[k];
arr2.push('<p>');
for (i = 0; i < arr.length; i++) {
if (arr[i][0].length == 1) {
arr2.push(arr[i][0]);
} else {
arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>');
}
}
arr2.push('</p>');
}
document.getElementById("text").innerHTML = arr2.join('');
var words = [...document.getElementsByClassName("word")];
words.forEach(function(word) {
word.onclick = function() {
if (word.className == "clicked") {
word.className = 'notclicked';
}
if (word.className == "onmouse") {
word.className = 'clicked';
}
}
word.onmouseover = function onMouse() {
if (word.className != "clicked") {
word.className = 'onmouse';
}
}
word.onmouseout = function onMouse() {
if (word.className != "clicked") {
word.className = 'notclicked';
}
}
});
I have no idea how to do this as the text to display is a variable.
How am I supposed to do this?

How about using Twitter Bootstraps tooltip. Add jQuery, bootstraps JS and CSS; once all this is added you would need to edit the line
arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>');
To something like
arr2.push(' <span class="notclicked word ' + i + '" data-toggle='tooltip' data-placement='top' title='YOUR_TRANSLATION_HERE'>' + arr[i][0] + '</span>');
EDIT 2 - Updated Link:
Here is a working example
Edit 3
I Would also add a bit of margin on top and bottom so that you don´t get unexpected behaviour from the tooltips, just because there is no space.

How to add auto complete address to dynamically added input fields

I want that user to see an alert whenever he doesn't enter proper Google address (or select from suggestion box) on dynamically added text areas. How can I perform that?
I have tried the following code.
I want that when I add new divs at runtime the auto-complete method should apply on that input field and when the user clicks submit button without selecting any suggested address it should display an alert.
Please help me where am I wrong in my code?
function updateNames() {
var rows = $(".clonedInput");
var index = 0;
rows.each(function () {
var inputFields = $(this).find("input");
inputFields.each(function () {
var currentName = $(this).attr("name");
$(this).removeClass("hasDatepicker");
$(this).removeClass("hasTimepicker");
$(this).attr("name", currentName.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var textareaFields = $(this).find("textarea");
textareaFields.each(function () {
var currName = $(this).attr("name");
$(this).attr("name", currName.replace(/\[(.*?)\]/, '[' + index + ']'));
var places = new google.maps.places.Autocomplete(currName);
var a = places.getPlace();
if (a == null) {
alert('Please Select a valid location');
}
else { }
var currId = $(this).attr("id");
$(this).attr("id", currId.replace(/\[(.*?)\]/, '[' + index + ']'));
});
var numberSpan = $(this).find("span.taskNumber");
numberSpan.html(index + 1);
index++;
});
}

Using append() doesn't replace previous content

Firstly, I was trying to replace some contents in a div container using html() in Javascript on click. The problem using this approach is it only put the last value in the array.
So, I used append() instead. But it doesn't work like what I have expected. Well, it does append text in the for loops, but after a click, it just appends the content without removing the previous content like what html() does.
Here is how I implement it:
<div id="events-content"></div>
// using Responsive Calendar js
onMonthChange: function(events) {
for (var eventsDate in options.events) {
if (eventsDate.indexOf(monthKey) != -1) {
var monthEvents = options.events[eventsDate];
for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {
$('#events-content').append(
'<p><b>' + eventsDate + ':</b> ' +
monthEvents.dayEvents[i].name + '<br/></p>');
}
}
}
},
...
How do I replace the previous appended text using Javascript?
I'm using this in Responsive Calendar JS

well, you could do something like this...
Prepare all the markup in the loop.
var html = "";
for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {
html += '<p><b>' + eventsDate + ':</b> ' +
monthEvents.dayEvents[i].name + '<br/></p>';
}
$('#events-content').html(html);

Clear the html before the for loop/append mechanism.
Use .empty()
onMonthChange: function(events) {
$('#events-content').empty() //or $('#events-content').html('');
for (var eventsDate in options.events) {
if (eventsDate.indexOf(monthKey) != -1) {
var monthEvents = options.events[eventsDate];
for(i = 0; i < options.events[eventsDate].dayEvents.length; i++) {
$('#events-content').append(
'<p><b>' + eventsDate + ':</b> ' +
monthEvents.dayEvents[i].name + '<br/></p>');
}
}
}
},

Regex match returns null for no reason

i am making a client for my node.js irc bot and want to implement tab complete but the regex in the following code returns null for no reason. i have included what's logged as comments next to the console.log statement.
what is tab complete: i type "mic" and press tab, it the automatically completes it to "michael" because he is a user in the channel.
tabStart = false;
$("#textbox").keydown(function (e) {
if (!$(this).val().length) return;
if (e.keyCode === 9) {
e.preventDefault();
var text = $(this).val();
console.log('text: ' + text);// mic
var index = text.lastIndexOf(" ");
console.log('index: ' + index);// -1
if (!tabStart) {
tabStart = index > -1 ? text.substr(index + 1) : text;
var current = '';
} else {
var current = index > -1 ? text.substr(index + 1) : text;
}
console.log('tabStart: ' + tabStart);// mic
console.log('current: ' + current);//
var active = $("#tabs").tabs("option", "active");
var channel = $("#tabs ul>li a").eq(active).attr("href");
console.log('channel: ' + channel);// #debug
var users = $(channel + " .user-list li");
var regex = new RegExp("^" + tabStart + ".*", "i");
console.log('regex: ' + regex);// /^mic.*/i
for (var i = 0; i < users.length; ++i) {
var user = $(users[i]).text();
console.log('user: ' + user);// michael
var match = user.match(regex);
console.log('match: ' + match);// null
if (match) {
var newText = (index > -1 ? text.substr(0, index + 1) : "") + user;
console.log('newText: ' + newText);
$(this).val(newText);
break;
}
}
} else {
tabStart = false;
}
});
as i said, i can't seem to find an explanation for this because i tried the following in the javascript console and it works
var regex = new RegExp("^mic.*", "i");"michael".match(regex);

It looks like you have an issue with getting the correct text from users. Since I don't know your actual HTML, I created a CodePen and commented out some of the channel lines and added users as a typical array. Doing that, your regex works fine.
Here is the codePen in action.

figured out the problem. user was wrapped in ​.

Create list html from selected text in Textarea

I have found various examples of using jquery to wrap selected text from a textarea in html tags, but I would like to adapt this slightly to create a list when multiple lines of text are selected.
Currently the code below wraps the whole selection in the list tags but I would also like to replace all the carriage returns with the closing and opening tags for list items - so each line in the text area is a new list item.
I think one of the problems might be that the .val function reads the text area as a single line.
jquery:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});
body:
<textarea id="markItUp" cols="80" rows="20"></textarea>
<br />
<input type="button" value="Bold" id="BoldIt" />

split your text like this:
function listText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var s = "\n";
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = "";
var rows = selectedText.substring(start, end).split(s);
for(var i = 0; i < rows.length; i++) {
replacement += openTag + rows[i] + closeTag + s;
}
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$(document).ready(function () {
$("#BoldIt").click( function() {
listText("markItUp", "<ul><li>", "</li></ul>");
});
});