We Keep Coding

Replacing the text by using jQuery script in shopify platform on the product page

Please help me out I'm a beginner in the Shopify platform and don't understand how to add my script to Shopify files.
Please help me with where and in which file should I place the code to replace the text on the product page. I need to change the Price text with M.R.P see the screenshot for reference: https://prnt.sc/xFWR-QIpVkPr
Here is the product page URL: https://uniqaya.com/products/exfoliating-body-scrub-polisher-with-coffee-grape-seed-oil?_pos=4&_sid=322f78f1b&_ss=r
See the code that I have used for scripting to replace, the HTML below is from the product page. I'm a little confused that the js library functions $ and jQuery both don't work in Shopify. Please help and give me the best solution to do this.
$(document).ready(function() {
$('.product-block product-block--price .variant__label').text('M.R.P');
});
<div data-product-blocks="">
<div class="product-block product-block--price">
<label class="variant__label" for="ProductPrice-template--15540147159204__main">
Price
</label>
</div>
</div>
the text with mine.

$(document).ready(function() {
$('.product-block--price label').text('M.R.P');
});
With js
document.querySelector('.product-block--price label').innerHTML = "M.R.P"

JavaScript code wont work in Shopify... Help :(

I am trying to add another announcement bar at our Shopify store below the current announcement bar so that we have 2 stacked on each other but my Javascript wont work. :(
I even followed these guidelines to make sure everything was correct.
Link:https://www.askquesty.com/post/how-to-add-javascript-shopify-tutorial
Can anyone help me out?
My code:
<script>
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var el = document.createElement("span.l");
el.innerHTML = "<p class=announcementBar2>FREE SHIPPING</p>";
var div = document.getElementById("announcement-bar");
insertAfter(div, el);
</script>

Even though this might work, I wouldn't recommend using JavaScript for this since it may cause layout shifts. I would modify the announcement bar snippet instead, can you provide the GitHub repo with your theme?

Ended up using HTML in the header.liquid
<div class="promobar-content">
<div class="bar-inner">
<span class="header-promotion-text header-promotion-text--desktop">
<p>FREE SHIPPING with 2 bags</p>
</span>
</div>
</div>

Chrome and oninput events

I have a textbox, and I am trying to fire an event oninput (my example below only removes a comma from the input, however I do need it to do more advance things). My code works great on Firefox and Internet Explorer, however when I click into the textbox in Chrome, I have about .5 seconds to start typing, otherwise I loose focus. Testing the exact code below on my website creates the error. Any idea?
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
q.value=q.value.replace(",","");
}
</script>
Thanks for any help

Credit goes to ComFreek and RobH for pointing it out that it works just fine on JS fiddle. I feel quite dumb for not trying it first. Turns out that some of the other Javascript on the page was causing the trigger to break. Thanks for everyone's help!

You can try to set a timer to run the code in the function.
<input type="text" id="question" name="question" oninput="clean(this);" />
<script type="text/javascript">
function clean(q){
window.setTimeout(function(){
q.value=q.value.replace(",","");
}, 0);
}
</script>

Try to use <input onkeyup="clean(this)">, it will only fire the function after something is typed into the input.
http://www.w3schools.com/jsref/event_onkeyup.asp

If you are going to do some complex things I'd recommend you use jQuery, because will fix this crossbrowser errors.
and use something like:
$('#input-desired').bind('keyup', function() {
this.value = this.value.replace(',', '');
});
If you wanna go for a simple application you can try this.
<input type="input" id="desired" onkeyup="desiredInputChanges(this);" />
In your Javascript file use something like:
desiredInputChanges = function (input) {
input.value = input.value.replace(',', '');
}
Just a note, don't forget to make a function to be your class and protect your methods :)

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure

Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.

I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>

Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.

Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

jsFiddle code doesn't run on Aptana

(first of all, a disclaimer: I'm a JavaScript / MooTools newbie, so it's very likely that the solution may be a trivial miss)
With some help, I was able to put a simple slider to run properly on jsFiddle, using MooTools. It is here -> http://jsfiddle.net/wowenkho/uGcTx/
Now, I want to reproduce it on my own PC. I learn from some threads here that I have to wrap jsFiddle code. In Aptana, I've got the code like this:
<html>
<head>
<script type="text/javascript" src="mootools_v1_2.js"></script>
<script type="text/javascript">
$(function()
{
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
});
</script>
</head>
<body>
<input name="q1_r1" id="q1_r1" type="hidden">
<span id="value">0</span>
<p ><div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" />
</div>
</body>
</html>
I do know that the MooTools version I'm using isn't exactly the same (jsFiddle is using 1.2.5, I'm using 1.2.1). I could try to use 1.2.5 here (and I will, meanwhile), but that's not the purpose, since I have to use 1.2.1. I also do know MooTools is running well, at least theoretically, since I've made the "hello world" before and it worked.
How this is at the moment, I only see the span and a text box, instead of the slider.
I guess I'm missing something trivial here.
Thanks all possible help in advance,
Jaff

There are two problems with your implementation the first is simple take it out of the $function wrapper if you look in the console your domready function is not getting called.
window.addEvent('domready',function()
{
var s = new Slider(document.id("slider-1"), document.id("slider-input-1"),
{
onChange : function(step)
{
document.id("q1_r1").set('value',step);
document.id("value").set('html',step);
}
});
window.onresize = function () {
//s.recalculate();
};
});
The second is that you are actually using a plugin for mootools. If you look at your js fiddle it says using mootools more 1.2.5.1. It's inside the more part that you find the slider class. If you don't have that then slider is not defined. So make sure when you download the core mootools which is required for all plugins that you also check the more and slider boxes. On the mootools website when you go to 1.2.5 download for core go to the more builder and you can add those.