I am so confused. I have used this jquery feature for a while now and it will not work here. It returns the right value and prints out to the console but it wont append the data on page load.
HTML :
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>
JS :
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
function selectAWord (){
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
selectAWord();
Try to use the ready function so the DOM will be fully loaded and your elements .currentWord/.guessRem are there for the .append :
$(function(){
//Your function call here
selectAWord();
})
Hope this helps.
$(function(){
selectAWord();
})
function selectAWord (){
var hangmanWords = ["baseball", "programming", "movies", "america", "lakers", "gardening"];
var wins = 0;
var remainingGuesses = 12;
var randomVal = hangmanWords[Math.floor(Math.random() * hangmanWords.length)].toString();
$(".currentWord").append(randomVal);
$('.guessRem').append(remainingGuesses);
console.log(randomVal);
return (randomVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-12">
<span>Press any key to get started!</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>Wins</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div>Current word: </div>
<br>
<div class="currentWord"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span class="guessRem">Number of guesses remaining:</span>
</div>
</div>
Related
I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.
To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>
This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>
I want to load data from many Js file to a HTML file, data only load last file Js. I don't know why.
This is my code :
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 back data-choice"></div>
<div class="top-title-detail-answer top-title col-sm-11">
<p></p>
</div>
</div>
<div class="row " >
<div class="question-area col-sm-12">
<img class="col-sm-2" src="./images/pantient.png" alt="" />
<div class="box-question col-sm-8">
<p>Q:</p>
<p id="question"></p>
</div>
</div>
<div class="answer-area col-sm-12">
<div class="box-answer col-sm-8">
<p>A:</p>
<p id="answer"></p>
</div>
<img class="col-sm-2" src="./images/doctor.png" alt="">
</div>
</div>
</div>
<script src="js/main.js"> </script>
<script>
window.onload = interactiveCanvas.ready({
onUpdate(data) {
let dataNew = data.data;
//back button
let backActions = dataNew.components[0].buttons[0];
let backTitle = backActions.name;
let backAction = backActions.actions;
let backType = backActions.type;
document.querySelector(".back").innerHTML = `<button type="button" class="button btn-back " data-choice="${backType},common(),${backAction}">${backTitle}</button>`;
//help title
let title = dataNew.title;
document.querySelector('.top-title-detail-answer p').innerText = title;
}
})
</script>
<script src="js/dataQa.js"></script>
</body>
Data only load from js/dataQa.js. If you know, Pls tell me why and help me load data from all file Js.
I'm trying to get this to work, but I don't know how to get the value from <span class="lsku"> value </span> and add it as a suffix after the the url. ex: domain.com/link-value
function changespan() {
var spans = document.querySelectorAll('span.lsku');
for (var i = spans.length; i--;) {
var a = document.createElement('a');
a.href = $(".link2part").attr('href');
spans[i].appendChild(a).appendChild(a.previousSibling);
}
}
changespan();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="lsku">view</span>
</div>
</div>
</div>
VIEW IT WITH JSFIDDLE.NET
I'm assuming your example has a typo and in the second block of divs the second span should have the class linkview instead of lsku. If so, then the following will work.
$('span.linkview').html(function(i, h) {
return $("<a/>", {
html: h,
href: 'domain.com/link-' + $(this).closest('div.divTableRow').find('span.lsku').text()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
I think you are looking for textContent or innerText:
function changespan() {
var spans = document.querySelectorAll('span.lsku');
for (var i = spans.length; i--;) {
var a = document.createElement('a');
a.href = $(".link2part").attr('href');
spans[i].appendChild(a);
a.href = a.href + spans[i].textContent;
a.textContent = spans[i].textContent;
}
}
changespan();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="lsku">view</span>
</div>
</div>
</div>
I think you could set the value property to the span tag, and pass this property at this section:
a.href = $(".link2part").attr('href');
Like this:
a.href = $(".link2part").attr('href' + 'value');
And the span tag should recive the value property with the value data you want. Like this:
<div class="divTableCell"><span class="lsku" value="view">view</span></div>
i want to make something like this https://muzzleapp.com/. I want the moving item in right part should be slide up and fade from bottom to top. Items should be moving continuously, so after the last div, it will start from beginning again. I have tried my own code. But stuck on starting from beginning point. It doesn't start properly from beginning.
html
function moveItems(el) {
var x = 1;
var flag = 0;
var elems = $(el).nextAll();
count = elems.length;
elems.each (function (i) {
setTimeout(function() {
if (x>1) {
y = x-1;
$('#slider_'+y).show().delay(2000).slideUp().fadeOut();
}
$('#slider_'+x).show().delay(2000).slideUp();
x++;
if (!--count) {
setTimeout(function() {
moveItems('.panel');
}, 6000)
}
}, i*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>
I updated your logic a little to handle the hide and show. Here is the updated preview https://jsfiddle.net/Aravi/hd465gpc/13/
function moveItems(el) {
var elems = document.querySelectorAll(el);
Array.from(elems).forEach((item,index) => {
setTimeout(function() {
index+=1;
$('#slider_'+index).show().delay(2000).slideUp().fadeOut();
if (index == elems.length) {
setTimeout(function() {
for(j=1;j<= elems.length;j++){ $('#slider_'+j).show()}
moveItems('.panel');
}, 6000)
}
}, index*2000);
})
}
moveItems('.panel');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel" id='slider_1'>
<div class="panel-body">
<div class="row">
slider 1
</div>
</div>
</div>
<div class="panel" id='slider_2'>
<div class="panel-body">
<div class="row">
slider 2
</div>
</div>
</div>
<div class="panel" id='slider_3'>
<div class="panel-body">
<div class="row">
slider 3
</div>
</div>
</div>
<div class="panel" id='slider_4'>
<div class="panel-body">
<div class="row">
slider 4
</div>
</div>
</div>
<div class="panel" id='slider_5'>
<div class="panel-body">
<div class="row">
slider 5
</div>
</div>
</div>
Need help with searching and adding algoritm
Javascript code to Compare divs(classes) in parents and if it missing add them to right place...
<div class="score">
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
</div>
<div class="system">
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
</div>
to...
<div class="score">
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
</div>
Maybe is the way throught array comparing but I cannot figure out..
https://jsfiddle.net/e5b1gots/8/
I solved this problem :)
//--- find all instrument ---//
function compareArrays(a, b) {
return !a.some(function (e, i) {
return e != b[i];
});
}
var a = [];
$('.system > div').each(function(){
var all_instruments = $(this).attr('class');
a.push(all_instruments);
});
var filter = function(value, index){ return this.indexOf(value) == index };
var filteredData = a.filter(filter, a );
var a = filteredData;
console.log(a);
$('.score > div').each(function(){
b = [];
$("> div",this).each(function(){
var all_instruments2 = $(this).attr('class');
b.push(all_instruments2)
});
//--- add missing instrument ---//
c = a.filter(function(val) {
return b.indexOf(val) == -1;
});
for (i = 0; i < a.length; i++) {
c = c.sort(a);
$('<div class="'+ (c[i]) +'">'+ (c[i]) +'</div>').appendTo(this);
$(".undefined").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="score">
<div class="system">
<div class="stff_Flute">stff_Flute</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
<div class="system">
<div class="stff_Flute">stff_Flute</div>
</div>
<div class="system">
<div class="stff_Oboe">stff_Oboe</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
<div class="system">
<div class="stff_Flute">stff_Flute</div>
<div class="stff_Oboe">stff_Oboe</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
</div>