I have this HTML code:
<div id="dadosalvaje" class="draconistone"><dl class="codebox"><dd><strong>Número aleatorio (1,10) : </strong>1</dd></dl></div>
<div id="dadosalvaje" class="draconistone"><dl class="codebox"><dd><strong>Número aleatorio (1,10) : </strong>3</dd></dl></div>
And i want to execute this JavaScript code on each one:
$(document).ready(function() {
//Arreglos
var zonas = ['draconistone','cessabit', 'valoran'];
var draconistone = ['bulbasaur', 'pikachu', 'squirtle'];
//Variables
var contenedor = $('#dadosalvaje');
var texto = contenedor.text().split(' ');
var resultado = texto.pop();
var zonaID = $('#dadosalvaje').attr('class');
for (var i = 0; i < zonas.length; i++) {
if (zonaID == zonas[i]) {
if (zonaID == 'draconistone') {
var pokemonSprite = draconistone[resultado - 1];
}
}
}
for (var i = 0; i < zonas.length; i++) {
if (zonas[i] == zonaID) {
contenedor.append('<img src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/' + pokemonSprite + '.gif"><div class="salvajeNombre">' + pokemonSprite + '</div>');
contenedor.attr('id', 'salvajelisto');
}
}
});
It just affects the first element and I can't find the way to modify both of them.
Is there any way to modify every single element with the same ID ?
First you need to make unique id
You do not need the "draconistone" class
Inside the $(document).ready(function() { and }); tags make the code a function with an id parameter like this:
function name(id) {
//Arreglos
var zonas = ['draconistone','cessabit', 'valoran'];
var draconistone = ['bulbasaur', 'pikachu', 'squirtle'];
//Variables
var contenedor = $('#' + id);
var texto = contenedor.text().split(' ');
var resultado = texto.pop();
var zonaID = $('#' + id).attr('class');
for (var i = 0; i < zonas.length; i++) {
if (zonaID == zonas[i]) {
if (zonaID == 'draconistone') {
var pokemonSprite = draconistone[resultado - 1];
}
}
}
for (var i = 0; i < zonas.length; i++) {
if (zonas[i] == zonaID) {
contenedor.append('<img src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/' + pokemonSprite + '.gif"><div class="salvajeNombre">' + pokemonSprite + '</div>');
contenedor.attr('id', 'salvajelisto');
}
}
}
Then execute the functions with the two different ids as parameters.
Maybe you can use $.each()
Like this
$('.draconistone').each(function() {
var zonaID = $(this).attr('class');
..
});
There is one for the same class
$( document).ready(function() {
$( ".draconistone" ).each(function( i ) {
var zonas = ['draconistone','cessabit', 'valoran'];
var draconistone = ['bulbasaur', 'pikachu', 'squirtle'];
//Variables
var texto = this.innerText.split(' ');
var resultado = texto.pop();
var zonaID = this.className;
for (var i = 0; i < zonas.length; i++) {
if (zonaID == zonas[i]) {
if (zonaID == 'draconistone') {
var pokemonSprite = draconistone[resultado - 1];
}
}
}
for (var i = 0; i < zonas.length; i++) {
if (zonas[i] == zonaID) {
this.innerHTML += '<img src="https://www.pkparaiso.com/imagenes/xy/sprites/animados/' + pokemonSprite + '.gif"><div class="salvajeNombre">' + pokemonSprite + '</div>';
this.id = 'salvajelisto';
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dadosalvaje1" class="draconistone"><dl class="codebox"><dd><strong>Número aleatorio (1,10) : </strong>1</dd></dl></div>
<div id="dadosalvaje2" class="draconistone"><dl class="codebox"><dd><strong>Número aleatorio (1,10) : </strong>3</dd></dl></div>
Related
I have a container where I dynamically add sections, I create items inside the section , that should be sortable, But Jquery sortable does not work inside dynamically created containers, while if I give the containers static it works,
Can anyone please share a solution.Thanks
https://jsfiddle.net/anubala/7ut5wk3j/1/
HTML:
<div class='row page-layout'>
<div class='col-md-10 col-md-offset-1' >
<div class="add_section_div">
<p>Add section</p>
</div>
<div id="contents">
</div>
</div>
</div>
JavaScript:
$(".wrap_body").sortable();
$(".add_section_div").on("click", function() {
var $section = "<div class='section_div'><div class='div_header clearfix'><p class='pull-left'>Add Wrap</p></div><div class='section_body div_body'></div></div>";
$("#contents").append($section);
})
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
})
const regex = /^.*-\s*(.*)$/;
$("body").on("click", ".wrap_div>.div_header", function() {
var $item1 = "<div class='drag col-sm-";
var $item2 = "'><div class='item_div'><div class='div_header clearfix'><p class='pull-left'><span class='minus'><i class='fa fa-minus'></i></span><span class='plus'><i class='fa fa-plus'></i></span></p><p class='pull-left header_text'>";
var $item3 = "</p></div><div class='div_body'></div></div></div>";
var length_item = $(this).parent().find(".wrap_body .item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($(this).parent().find(".wrap_body>div:eq('" + i + "')")) {
console.log($(this).parent().find(".wrap_body>div:eq('" + i + "')"))
var col_count_text = $(this).parent().find(".wrap_body>div:eq('" + i + "')").attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var current_col_count = 12 - (count % 12);
if (count < 12) {
$(this).parent().find('.wrap_body').append($item1 + current_col_count + $item2 + "col-sm-" + current_col_count + $item3);
}
})
function find_col_count(col_text) {
var col_count = regex.exec(col_text);
col_count.forEach((match, groupIndex) => {
count1 = match;
});
return count1;
}
$("body").on("click", ".plus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var length_item = $parent.parent().find(".item_div").length;
var count = 0;
for (i = 0; i < length_item; i++) {
if ($parent.parent().find(".item_div:eq('" + i + "')").parent()) {
var col_count_text = $parent.parent().find(".item_div:eq('" + i + "')").parent().attr('class');
count += parseInt(find_col_count(col_count_text));
}
}
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (count < 12) {
var col_count_new = "col-sm-" + (++col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});
$("body").on("click", ".minus", function() {
var $parent = $(this).parent().parent().parent().parent();
var col_count_text = $parent.attr('class');
var col_count = find_col_count(col_count_text);
if (col_count > 1) {
var col_count_new = "col-sm-" + (--col_count);
var col_count_drag = "drag " + col_count_new;
$parent.attr("class", col_count_drag);
$parent.find(".header_text").html(col_count_new);
}
});
You probably may have found the solution already but to solve this issue you only need to move this line
$(".wrap_body").sortable();
To where you actually append the .wrapper_body to the body as following:
$("body").on("click", ".section_div>.div_header", function() {
var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>";
$(this).parent().find('.section_body').append($wrap);
$(".wrap_body").sortable();
});
This should solve your problem. See JsFiddle
I like to show my titles of posts on a specific page. It is more effective to get know what author have written than scroll all pages or navigate using archive widget.
I found code (code is below) for generate list that sort post titles alphabetically but I like to show titles in chronological order. There is lot of code example about this but they are outdated. They doesn’t work anymore after some changes in blogger platform.
How to change code to get post titles in chronological order and in format YYYY.MM.DD ?
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12() {
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root) {
//Sort Alphebetically
allResults.sort(function(a, b)
{
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root) {
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == "alternate") {
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0) {
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults) {
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
Code is copied from here: https://dansator.blogspot.fi/2015/10/general-alphabetical-list-of-posts.html
Remove sort method from the code. remove the following :
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
Your code should be
<div>
<ul id="postList12"></ul>
</div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 150;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0,10) + ")";
liE.appendChild(a1E);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
</script>
How can I get the chat to scroll to bottom when new content is sent into the chat? I'm trying to add something like this:
$('#what do I have to put here?').animate({scrollTop: $('#and here?').prop("scrollHeight")}, 200);
but I can't make it work (I have no idea where in the code to place it).
Thanks!
This is an important part of the code... Maybe I have to add it here (but I don't know how or where):
<script type="text/javascript">
var _answerBot = new answerBot();
function keypressInput(sender, event) {
if (event.which == 13) {
document.getElementById('subcontent').innerHTML += _answerBot.processInput(sender.value);
sender.value = '';
}
}
</script>
This is a separate scripts.js file:
var answerBot = function () {
var _this = this;
_this.processInput = function (text) {
updateUrl(text);
var _result = "<p class='answerbot-input'>" + text + "</p>";
text = text.replace(new RegExp("[ ]{2,}", "g"), " ");
var _words = text.toLowerCase().split(" ");
var _answers = [];
var _title = "";
if (_words.length === 0 || _words.toString() === '') { //if the input is empty
_answers = _this.specialContext.emptyInput;
_title = _this.specialContext.emptyInput;
} else {
var _possibleAnswers = findMatches(_words);
if (_possibleAnswers.length === 0) { //if no answer found
_answers = _this.specialContext.wrongInput;
_title = _this.specialContext.wrongInput;
}
if (_possibleAnswers.length == 1) { //context recognized
_answers = _this.answers[_possibleAnswers[0]].values;
_title = _this.answers[_possibleAnswers[0]].description;
}
if (_possibleAnswers.length > 1) {
_result += formatText(_this.specialContext.rephrase, _this.specialContext.rephrase);
for (var i = 0; i < _possibleAnswers.length; i++) {
_result += formatText(_this.answers[_possibleAnswers[i]].description, _this.answers[_possibleAnswers[i]].description);
}
}
}
if (_answers.length > 0) {
var _rand = Math.floor((Math.random() - 0.001) * _answers.length);
_result += formatText(_answers[_rand], _title);
}
return _result;
};
function formatText(text, title) {
return "<p class=\'answerbot-ai\' title=\'" + title + "\'>" + text + "</p>";
}
function findMatches(words) {
var foundKeywords = [];
var _possibleAnswers = [];
for (var i = 0; i < _this.keywords.length; i++) {
foundKeywords[i] = 0;
for (var j = 0; j < words.length; j++) {
if (_this.keywords[i].keys.indexOf(words[j]) >= 0) {
foundKeywords[i]++;
if (foundKeywords[i] == _this.keywords[i].keys.length) {
return [_this.keywords[i].value];
}
}
}
if (foundKeywords[i] * 2 > _this.keywords[i].keys.length) {
_possibleAnswers.push(_this.keywords[i].value);
}
}
return _possibleAnswers.filter(function (elem, pos) {
return _possibleAnswers.indexOf(elem) == pos;
});
}
function updateUrl(text){
history.pushState(null, null, "#question=" + encodeURIComponent(text));
if(typeof ga === "function")//google analytics
ga('send', 'event', 'question', text);
}
};
function AddMessage() {
var $message = $("<p>").text("message");
var $messages = $("#messages");
$messages.append($message);
$messages.animate({
scrollTop: $messages.prop("scrollHeight")
});
}
#messages {
border: 1px solid #000;
height: 100px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat">
<div id="messages"></div>
<button onClick="AddMessage()">Add Message</button>
</div>
When I hit my calculate button, the new lists with values pulled from the arrays are visible, but the second array is missing a value.The missing value is not always the same value. For example if I put in 1,2,3,4,5,6, it's not always the same number missing, it's probably the last value in the array, but I can't figure out where I went wrong. Here's the code:
$(document).ready(function() {
function copyarray(arraytocopy) {
var theCopy = []; // An new empty array
for (var i = 0, len = arraytocopy.length; i < len; i++) {
theCopy[i] = arraytocopy[i];
}
return theCopy;
}
function sortarray(arraytosort) {
arraytosort.sort(
function(a, b) {
return Math.round(Math.random());
}
);
return arraytosort;
}
function checkarrays(newarray, oldarray) {
var swappositions = [];
for (var i = 0; i < newarray.length; i++) {
if (newarray[i] == oldarray[i]) {
//alert(oldarray[i] + ' is the SAME!');
swappositions.push(newarray[i]);
}
}
var countsame = 0;
swappositions.reverse();
for (var i = 0; i < newarray.length; i++) {
if (newarray[i] == oldarray[i]) {
///alert(oldarray[i] + ' is the SAME!');
newarray[i] = swappositions[countsame];
countsame = countsame + 1;
}
}
for (var i = 0; i < newarray.length; i++) {
if (newarray[i] == oldarray[i]) {
//alert(oldarray[i] + ' is the SAME!');
//swappositions.push(newarray[i]);
var elementbefore = newarray[i - 1];
newarray[i - 1] = newarray[i];
newarray[i] = elementbefore;
}
}
///alert('test');
///alert('new array: ' + newarray);
///alert('old array: ' + oldarray);
//alert(swappositions.toString());
//alert($.inArray( swappositions[0], newarray ));
return true;
}
Array.prototype.randomize2 = function() {
var oldarray = copyarray(this);
sortarray(this);
var notthesame = checkarrays(this, oldarray);
if (notthesame = false) {
//alert('sort again');
sortarray(this);
notthesame = checkarrays(this, oldarray);
}
//alert('new: '+this);
//alert('old: '+oldarray);
//alert('not the same!');
return this;
};
function makelist(myarray) {
var list = '<ol>';
var listitem = '';
for (var i = 0; i < myarray.length; i++) {
if (/\S/.test(myarray[i])) {
listitem = '<li>' + $.trim(myarray[i]) + '</li>';
list += listitem;
}
}
list += '</ol>';
//alert(list.toString());
return list.toString();
}
function combinelists(ordered, random) {
var list = '<ol>';
var listitem = '';
for (var i = 0; i < ordered.length; i++) {
if (/\S/.test(ordered[i])) {
if ($.trim(random[i]) == $.trim(ordered[i])) {
listitem = '<li class="same"><span class="yourname">' + $.trim(ordered[i]) + '</span> is matched with<span class="peersname">' + $.trim(random[i]) + '</span></li>';
list += listitem;
} else {
listitem = '<li><span class="yourname">' + $.trim(ordered[i]) + '</span> is matched with <span class="peersname">' + $.trim(random[i]) + '</span></li>';
list += listitem;
}
}
}
list += '</ol>';
//alert(list.toString());
return list.toString();
}
$('#ranGen').click(function() {
//function randomize(){
var lines = $('#names').val().split(/\n/);
var texts = [];
for (var i = 0; i < lines.length; i++) {
// only push this line if it contains a non whitespace character.
if (/\S/.test(lines[i])) {
texts.push($.trim(lines[i]));
}
}
var orderedlist = makelist(lines);
//$( "#list" ).html(orderedlist);
var linescopy = $.extend(true, [], lines);
var randomarray = linescopy.randomize2();
//alert(randomarray);
var randomlist = makelist(randomarray);
//$( "#randomlist" ).html(randomlist);
var combinedlists = combinelists(lines, randomarray);
$("#combined").html(combinedlists);
});
});
textarea {
height: 100px;
width: 400px;
}
input {
display: block;
}
.list {
display: inline-block;
}
.same {
color: orange;
}
.yourname {
color: blue;
}
.peersname {
color: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Get a random match </h1>
<p>Insert all your names into the textarea below. Each name should be on a new line. Hit the button to generate your matches.</p>
<form>
<textarea id="names" placeholder="Enter list of names here. Each name should be on a new line."></textarea>
<input type="button" id="ranGen" value="Go" onClick="JavaScript:randomize()" />
</form>
<div id="list" class="list"></div>
<div id="randomlist" class="list"></div>
<div id="combined" class="list"></div>
Filtering out "empty" lines should fix the issue
var lines = $('#names').val().split(/\n/).filter(function (val) {
return val.trim() != '';
});
i am new to html and js. I have created a form with the following script. i have an event handler for calculateTime. I cant seem to get the form to calculate. If you guys could point me in the right direction that would be great. Thanks
<script>
function getWaterSystem() {
var waterSystem;
var selectedSystem = 0;
for (var i = 1; i <= 4; i++) {
waterSystem = document.getElementById("system + i");
if (waterSystem.checked == true) {
waterSystem = waterSystem(i).value;
}
}
return waterSystem;
}
function largePlant() {
var checkbox;
checkbox = document.getElementById("large");
if (checkbox(i).checked) {
checkbox = 1.5;
}
else {
checkbox = "";
}
return checkbox;
}
function getSoilType() {
var soilType;
var selectedSoil = 0;
for (var i = 1; i <= 3; i++) {
soilType = document.getElementById("soil + i");
if (soilType[i].checked) {
soilType = soilType[i].value;
}
}
return soilType;
}
function calculateTime() {
var waterTime = getWaterSystem() * getSoilType() * largePlant();
alert("The recommended watering time is " + waterTime);
}
</script>
I made some adjustment, just check it out, it's quite simple:
document.getElementById("check1").checked
<script>
function getWaterSystem() {
var waterSystem=0;
var selectedSystem = 0;
for (var i = 1; i <= 4; i++) {
if (document.getElementById("system" + i).checked) {
reutrn waterSystem = document.getElementById("system" + i).value;
}
}
return waterSystem;
}
function largePlant() {
var checkbox=0;
if (document.getElementById("large").checked) {
checkbox = 1.5;
}
else {
checkbox = 0;
}
return checkbox;
}
function getSoilType() {
var soilType=0;
var selectedSoil = 0;
for (var i = 1; i <= 3; i++) {
soilType = document.getElementById("soil" + i);
if (document.getElementById("soil" + i). checked) {
soilType = document.getElementById("soil" + i).value;
return soilType;
}
}
return soilType;
}
function calculateTime() {
var waterTime = getWaterSystem() * getSoilType() * largePlant();
alert("The recommended watering time is " + waterTime);
}
</script>
Could it have something to do with these two lines:
waterSystem = document.getElementById("system + i");
soilType = document.getElementById("soil + i");
If you want to target the id of #systemX or #soilX where X is being a number from you i var. You should write it like this:
waterSystem = document.getElementById("system" + i);
soilType = document.getElementById("soil" + i);