Is this possible to convert to JS?

[iridion9]

Hi guys,

I have these codes below,

    <script>
        $(function () {
            $("div #right-answer").hide();
            $("div #reference").hide();
            
            $("#done").click(function(){
                $("div #right-answer").show();
                $("div #reference").show();                
            });            
        });    
    </script>

Is this possible to convert this in javascript?
Can you show me the codes?

Thanks in advance.

[Paul_Wilkins]

@iridion9

Is this possible to convert this in javascript?

I hate to break it to you, but that is already JavaScript.

[iridion9]

No it’s not javascript.
Review it again, it’s jQuery.

I need to convert it to JS, if this is possible.
Because I need to combine the JS codes with this codes.
I can write and read PHP codes but,
Javacript is not my specialty that is why I’m asking…

[Paul_Wilkins]

@iridion9

No it’s not javascript.
Review it again, it’s jQuery.

Yes, jQuery is a dialect of JavaScript, in much the same way that English has Recieved Pronounciation, and Cockney, and Geordie.

I believe that what you are wanting to ask, is to remove the reliance on the jQuery library. Is that right?

[iridion9]

Okay here is the other codes that I needed to combine,

        var answer = '<?php  echo $ans; ?>';
        var button = document.getElementById('done');
        var textarea = document.getElementById('right-answer');

        button.addEventListener('click', function() {
            textarea.value = answer;
        });     

The idea is when a user clicks the ‘done’ button it will show up the hidden textarea
and then insert the value texts content from the var answer into the same textarea.
The id for the textarea is right-answer.
The id for the button is called ‘done’

Can you help me with this please.

Thanks in advance.

[iridion9]

@paul_wilkins

Yes please can you help me.
Thanks in advance.

[Paul_Wilkins]

@iridion9

@paul_wilkins

Yes please can you help me.
Thanks in advance.

Here’s the converted JavaScript code. A demo that you can play around with can be found at https://jsfiddle.net/tm4t40qu/3

function getEl(selector) {
  return document.querySelector(selector);
}

function hide(selector) {
  getEl(selector).classList.add("hidden");
}

function show(selector) {
  getEl(selector).classList.remove("hidden");
}

function forEachSelector(selectors, func) {
  selectors.forEach(func);
}

function hideAnswer() {
  forEachSelector(answer, hide);
}

function showAnswer() {
  forEachSelector(answer, show);
}

var answer = [
  "div #right-answer",
  "div #reference"
];
hideAnswer();
getEl("#done").addEventListener("click", showAnswer, false);

[RyanReese]

@Paul_Wilkins

function hide(selector) {
var el = document.querySelector(selector);
document.querySelector(selector).classList.add(“hidden”);
}

Couldn’t this be optimized? Forgive me if I’m mistaken…Not sure why the var el exists if you weren’t planning on using it. Probably an oversight?

function hide(selector) {
  var el = document.querySelector(selector);
  el.classList.add("hidden");
}

[Paul_Wilkins]

[quote=“RyanReese, post:9, topic:230718, full:true”]
Couldn’t this be optimized?[/quote]

Yes it can, and has. There’s now a separate function to get the element based on the selector.

[RyanReese]

Looks great! (once you stop editing ).

[iridion9]

Hi paul_wilkins

thans dude. will try it.

[Paul_Wilkins]

@RyanReese

Looks great! (once you stop editing ).

That’s the way of code - there no end to the improvements that can be made. Only a realization that your boss (if you have one) might not approve of how his money is being spent

[iridion9]

@Paul_Wilkins

This is what I wanted below to incorporate into your prototype codes.
Let say the div with the id of right-answer is empty.
Now let say the var ans=‘testing’ , how to fetch the value of variable ans and insert it into div with an id of right-answer when someone clicks the ‘done’ button?

So when someone clicks the ‘done’ button the ‘testing’ text string will show up inside the div with an id of right-answer.

Thanks in advance

[Paul_Wilkins]

It will be more than 12 hours before I can return to this.

[iridion9]

no problem. I’m not rushing…
thanks.

[Paul_Wilkins]

[quote=“iridion9, post:14, topic:230718, full:true”]
This is what I wanted below to incorporate into your prototype codes.[/quote]

Okay, I’ll do this step by step on the jsfiddle example.

@iridion9

Let say the div with the id of right-answer is empty.

<div id="right-answer"></div>

[quote=“iridion9, post:14, topic:230718, full:true”]
Now let say the var ans=‘testing’ , how to fetch the value of variable ans[/quote]

That all entirely depends on the scope within which the ans variable is residing. You can only use the ans variable when you in the scope of that ans variable, or in a deeper scope than where it is.

Further details on your particular situation in regard to the ans variable will be required before a satisfactory answer can be given.

In the meantime though, I will assume that the ans variable is local to the other code that is being run here.

var ans = "testing";

@iridion9

and insert it into div with an id of right-answer when someone clicks the ‘done’ button?

We can update the event handler to do that. Previously it was just calling the showAnswer function, but now we can use a handler function that will help to coordinate things.

function answerHandler() {
	showAnswer(answers);
  replaceContent(rightAnswer, ans);
}

@iridion9

So when someone clicks the ‘done’ button the ‘testing’ text string will show up inside the div with an id of right-answer.

And that can be done with the use of a replaceContent function:

function replaceContent(selector, content) {
	getEl(selector).innerHTML = content;
}

An updated example can be seen at https://jsfiddle.net/pmw57/tm4t40qu/4/