|
Not the right place to post this. If you want to publish your GitHub project on CodeProject, import it as a project:
Your GitHub Project on CodeProject[^]
NB: It will be subject to the same standards as other articles[^], so make sure your readme.md has enough information about the project first.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi CodeProject friends,
Probably my question is too broad, but what do you think is the best way to trace and solve
JavaScript conflicts?
Cheers,
modified 11-Jan-21 3:14am.
|
|
|
|
|
ReverseAds wrote: but what do you think is the best way to trace and solve JavaScript?
Your query is not clear. What do you mean by trace/solve JavaScript? JavaScript is not a problem to be solved.
If you are looking for JavaScript related code, you can debug it using editors or even browser developer console.
|
|
|
|
|
ReverseAds wrote: JavaScript conflicts?
What do you mean by conflict?
|
|
|
|
|
Remove everything then put things back a bit at a time. When it stops working the last thing you added is responsible.
|
|
|
|
|
i have a javascript file which will do some specific requiredment but now i need to convert it into arrow function how to do it.
const characters = [
{ name: 'Jean-Luc Picard', age: 59 },
{ name: 'Will Riker', age: 29 },
{ name: 'Deanna Troi', age: 29 }
];
const result = characters.map(function (item)
{
const nameArray = item.name.split(" ")
return {
first_name: nameArray[0],
last_name: nameArray[1],
age: item.age < 30 ? 'young' : 'old'
}
})
console.log(result)
this is the actual code how to convert it into arrow function
|
|
|
|
|
Simple:
const characters = [
{ name: 'Jean-Luc Picard', age: 59 },
{ name: 'Will Riker', age: 29 },
{ name: 'Deanna Troi', age: 29 }
];
const result = characters.map((item) =>
{
const nameArray = item.name.split(" ")
return {
first_name: nameArray[0],
last_name: nameArray[1],
age: item.age < 30 ? 'young' : 'old'
}
})
console.log(result)
The structure of
function (params) {
}
becomes
(params) => {
}
There are some other rules that allow you to avoid parenthesis, etc. For that please see MDN documentation for this: Arrow function expressions - JavaScript | MDN
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
You could also use array destructuring when splitting the name:
const [first_name, last_name] = item.name.split(" ");
return {
first_name,
last_name,
age: item.age < 30 ? "young" : "old"
}; Destructuring assignment - JavaScript | MDN[^]
Demo[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hello we do develop a quiz
also have code but we want just quiz check which user click on mcq answer
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
function populate() {
if(quiz.isEnded()) {
showScores();
}
else {
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
var choices = quiz.getQuestionIndex().choices;
for(var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
var questions = [
new Question("शरीर से पसीना सबसे अधिक कब निकलता है", ["जब तापक्रम अधिक और हवा सुख हो", "जब तापक्रम अधिक और हवा आर्द्र हो","जब तापक्रम कम और हवा आर्द्र हो", "जब तापक्रम कम और हवा सुखी हो"], "जब तापक्रम अधिक और हवा आर्द्र हो"),
new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
new Question("Which is not a JavaScript Framework?", ["Python Script", "JQuery","Django", "NodeJS"], "Django"),
new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"], "PHP"),
new Question("Webdevtrick.com is about..", ["Web Design", "Graphic Design", "SEO & Development", "All"], "All")
];
var quiz = new Quiz(questions);
populate();</pre>
modified 5-Jan-21 11:51am.
|
|
|
|
|
Quote: which user
That needs you to know which user opened the form, which needs you to handle this request from a web server and authenticate the users before showing the form to them.
That answer requests a server-side answer, and it depends on which language/framework you are using to build that.
The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~
|
|
|
|
|
This is part of the old PHP 4.7 App that I'm working on. The last time somebody worked on it was back in 2008, so there is a lot of old outdated stuff in it. One of them is this eval() function.
I read up on it, but I'm still kind of fuzzy on the point of it. If I understand correct, it evaluates the notion of an equation, or string, and returns the outcome if it can be done, or undefined if it can't be done. And then the Mozilla documentation said "Don't use it", and offered work around solutions such as using a function instead.
Looking at this block of JavaScript, I'm having trouble with understanding why it was written this way, and coming up with a rewrite.
So like on Ref 1, it must be a select option element, and it getting the value.
I would think document.getElementByID('document.step2.' + txt + '.value') would be a good replacement, and then check if the element is undefined.
And Ref 2 is thew same thing.
Mozilla says this, in which I get, but confuses me because my eval() is being used different.
I just need help in understanding, and if I am interpreting this correct.
Wrong
function looseJsonParse(obj){
return eval("(" + obj + ")");
}
Right
function looseJsonParse(obj){
return Function('"use strict";return (' + obj + ')')();
}
function save(bkType, txt, id , dataType) {
let error = false;
let typeVar = eval('document.step2.' + txt + '.value');
let referenceId = '';
let refDetail = '';
let quantity = '';
const fPost = true;
if ('Q' == bkType) {
typeVar = 'document.step2.' + id + '\$quan' + '.value';
quantity = eval(typeVar);
}
else if ('TQ' == bkType) {
typeVar = 'document.step2.' + id + '\$quan' + '.value';
quantity = eval(typeVar);
typeVar = 'document.step2.' + id + '\$type' + '.value';
referenceId = eval(typeVar);
if ('quan' != data_type) {
var typeOptions = eval('document.step2.' + txt + '.options');
FilterInactivePart(typeOptions);
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
There is a much easier way than using eval for your particular example. The w.x.y.z syntax in Javascript can be rewritten as w['x']['y']['z'] instead.
So instead of
var typeOptions = eval('document.step2.' + txt + '.options');
you can use
var typeOptions = document.step2[txt].options;
|
|
|
|
|
That was going to be my next question.
I got that error about missing name after dot operator, and tried working with dots.
So I started working on it, but didn't get it to work right. Then I realized that the original author just wanted to make sure that the right select element was chosen, so I sent "this" to the function.
From this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier($sel_cat_name)'>
To this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier(this, $sel_cat_name)'>
And adjusted the function
From this:
function check_supplier(opType) {
const form_ele_name = "document.form2." + op_type + ".selectedIndex";
let tmp_sel_index = eval(form_ele_name);
const form_sel_name = "document.form2."+op_type+".options["+tmp_sel_index+"].text";
let sel_ven_name = eval(form_sel_name);
To This:
function check_supplier(sourceElement, opType) {
const tempSelectIndex = sourceElement.selectedIndex;
const formSelectName = sourceElement.options[tempSelectIndex].text;
let selectVendorName = eval(formSelectName);
I don't know, guess it could be re imagined several different ways. But your help is of great value to quickly fix this.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi!
This is an example of code.
Simply not able to understand what it does. How can I check some kind of result in the console?
Thank you in advance if sy tell me.
timeFuncRuntime(() => {
for (let i = 10; i>0; i--){
console.log(i);
}
});
The explanation from lecture:
In this example, we invoked timeFuncRuntime() with an anonymous function that counts backwards from 10. Anonymous functions can be arguments too!
|
|
|
|
|
It sets variable i to the value 10, and then runs the for loop. Each time round the loop it prints the value of i to the console. At the end of each iteration it subtracts 1 from i (i--) and tests if it is greater than zero. When the value of i is not greater than zero the loop terminates.
Use your browser console window to see the results.
|
|
|
|
|
I see, but this is a anonymous function how can be invoked?
If simply run it throw an error like:
error: Uncaught ReferenceError: timeFuncRuntime is not defined
|
|
|
|
|
Yes, I get the same. I think there is some information missing.
|
|
|
|
|
If you add the line:
function timeFuncRuntime(f) { f();}
somewhere in your script section it should work. The timeFuncRuntime function must be defined, and take a function as its only parameter. It will then call that function and execute it. So the call in the other block of code passes the anonymous function to timeFuncRuntime, where it gets executed.
|
|
|
|
|
|
You are welcome; and I learned something today. But I would suggest you talk to your lecturer about what we discovered.
|
|
|
|
|
Hi, i have created a favourite button which once clicked uses .append to add onto the favourites page the option clicked. I am having difficulties grabbing all the results on that page and displaying it in a textfield which can then be emailed. Below is what i got so far many thanks.
<!-- This is page 1-->
<div data-role="page" id="item1">
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite1" id="favourite1" class="custom">
<label for="favourite1">Add to favourites</label>
<div id="dog"><img id="theImg" src="images/dog.png" />Where is the image?</div>
</fieldset>
<!-- This is page 2-->
<div data-role="page" id="item2">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Item 2</h1>
</div>
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite2" id="favourite2" class="custom">
<label for="favourite2">Add to favourites</label>
</fieldset>
<!-- Favourites page -->
<div data-role="page" id="favourites">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Favourites</h1>
</div>
<div role="main" class="ui-content"> <!-- main contain-->
<h1>Favourites</h1>
<!-- buttons allowing navigation to item 1 and item 2-->
<a href="#item1" class="ui-btn ui-btn-inline">Item 1 page</a>
<a href="#item2" class="ui-btn ui-btn-inline">Item 2 page</a>
<div id="favourite-content"><p>My favourites: </p></div>
<div id="list"
<form action="mailto:@mail.com Feedback" method="post" enctype="text/plain">
Email Adress:<br />
<input type="text" id ="fav" name="email_address" value="" maxlength="100" /><br />
<input type="submit" value="Submit" />
</form>
</div>
$(document).on( 'pagecontainerbeforehide', 'body', function( event, ui){
//do something
if ( ui.nextPage.attr('id')== "favourites") {
$("#favourite-content").html ("");
if ($( "#favourite1" ).is( ":checked" )) {
$("#favourite-content").prepend('<img id="theImg" src="images/dog.png"/>');
}
if ($( "#favourite2" ).is( ":checked" )) {
$("#favourite-content").append("<p>item2 details</p>");
}
}
});
|
|
|
|
|
I've been searching around the web. Found indexedDB.open and tried it out. But I really need some sort of call back, or a promise when the PHP page has finished.
Below seems to work, but returns success right away and the spinner doesn't show.
Just looking for better ideas. Or maybe I can build on this. It's a start at least.
function saveWithProgress(stage) {
console.log("Save with Progress - Calling msrp.phtml");
const spinner = document.getElementById('spinnerOverlay');
if (stage == 'construction') {
let note = prompt('Please brief summary of changes - construction', '');
if (note != '' && note != null) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const cUrl = 'msrp.phtml?save=1&new_note=' + note + '&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(cUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress Construction - Success!');
var db = event.target.result;
console.log("Save with Progress Construction - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
else
{
if (confirm('Are you sure that you want to save the changes? - everything but construction')) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const saveUrl = 'msrp.phtml?save=1&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(saveUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress - Success!');
var db = event.target.result;
console.log("Save with Progress - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
the "onsuccess" and "onerror" functions are your callbacks. IndexedDB is asynchronous; see IDBFactory.open() - Web APIs | MDN for how to define those callback functions.
Have you tried stepping through your code in the browser's debugger? The "open" call is likely to complete so fast that you won't see the spinner appear/disappear if you run in "real time".
|
|
|
|
|
I'm using Visual Code for this PHP 4.3 App, and I don't have the database available locally. I have to work off a remote server, edit here and copy to there and then run the program.
I figured open just opens the file, and success confirms that the file was opened as a call back. I was looking for a call back for when the file was done executing.
I guess I can try a setting a var, which is suppose to be beyond block level and see if the file I'm calling can see the var and alter the value, or something like that. Or maybe build a promise.
Spent all day yesterday building the spinner, CSS and testing it to run in frames and out of frames and reverse engineering of how this thing works. Was pretty brain dead by the time I got to this.
Thanks for the lead however, I'll run with it and see where it goes.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
The "open" method simply creates a connection to the database, your code as shown above is not (yet) running anything (in terms of saving or retrieving data). You've not told us what you're trying to achieve, but the documentation does include a number of examples that should guide you through what you need. I suspect you may (a) be overcomplicating things, and/or (b) be expecting things to take much longer than they actually will.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
