Develop Reference

Removing elements of a class in a web page using JavaScript

I am trying to use the 'Requestly' extension on google chrome to remove the description text and uploaders' profile on Pinterest. I used inspect elements to identify the class they belong to and wrote the following script to remove them.
const boxes = document.getElementsByClassName('zI7 iyn Hsu');
for (const box of boxes) {
// ️ Remove element
box.style.display = 'none';
// ️ hide element (still takes up space on page)
// box.style.visibility = 'hidden';
}
However, after saving the rule and reloading the page, nothing happens. I'm pretty new to programming and have no idea how to begin troubleshooting this being the first problem I'm trying to solve.
requestly editor screenshot
class name screenshot

How about trying:
box.style.display = 'none !important';
Does it change anything?

How to get a word content from an element and append it to the end of a URL of a href?

There is a function called "dictionary link" in Anki as the manual explains:
Dictionary Links
You can also use field replacement to create dictionary links.
Imagine you’re studying a language and your favourite online dictionary allows you to search for text using a web URL like:
http://example.com/search?q=myword
You could add an automatic link by doing the following in your template:
{{myword}}
check in dictionary
The template above would allow you to search for each note’s expression by clicking on the link while reviewing.
I am now learning HTML + CSS + Javascript from scratch, I'd like to add a similar tool in my own practice website.
I want to copy the text content (the word that I want to check in the dictionary) of an element, add it to the end of the url. When I click the link the corresponding dictionary page will show up.
For example:
<span id="search">entry</span>
copy "entry" and add it to the end of
<a id="dictionary" href="http://example.com/search?q=">link</a>
Since I am a complete beginner, I haven't learned jQuery or other tools yet. Is it possible to do this only by HTML and Javascript?

const search = document.getElementById("search");
const link = document.getElementById("dictionary");
link.href = `http://example.com/search?q=${search.innerText}`;
You have to assing new href property to link by getting innerText of search element

Did you try to use these apex:
<a href=`http://example.com/search?q=${myword}`>check in dictionary</a>
Otherwise you have to build the link by js script and then assign to a element:
let link = 'http://example.com/search?q=' + customParam
// Fetch the tag <a>
let hrefElement = document.getElementById('#idElement');
// Change the href param with your link
hrefElement.href = link;

Try this link and try to work around
function clicks(){
var foo = document.getElementById("dictionary").id
$("a").attr("href", "http://example.com/"+foo+"?q=")
}

document.getElementById("myLink").href = customLink will set your link to your a element
//get input element
var inputElement = document.getElementById('param-input');
// add event to listen every time a letter is introduced
inputElement.addEventListener("keyup", composeUrl);
function composeUrl() {
// get value from input
var param = inputElement.value;
// compose url
var customLink = "http://example.com/search?q=" + param
//set href
document.getElementById("myLink").href = customLink
//get href
var result = document.getElementById("myLink").href;
//print link in a div
document.getElementById("demoLink").innerHTML = result.toString()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="param-input" />
<a id="myLink" />
<div id="demoLink"> url composed </div>

Select all anchor tags based on href and Change it

i have a question regarding changing URL of anchor tags based on HREF.
What i do to select all anchor tags is like this:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
With this i select all anchor tags that refers to secureloan.asim.no
What i want also is to CHANGE the links when user click on it (i want to remove a parameter)
example of URL can be:
Example URL:www.secureloan.asim.no/oasis/index.html#/no/asim?lang=nb-no&product=lev&lanekilde=&campaigncode(etc....).
i want to remove "lanekilde=" from the parameter. im using this code:
String(document.location.href).replace("&lanekilde=", "");
This gives me right URL but how do i change it for all users on website when they click on it.
Code ive made til now:
var anchortags= document.querySelectorAll("a[href*='secureloan.remember.no']");
String(document.location.href).replace("&lanekilde=", "");
thank you :)
PS: NO Jquery please!
PS: im using tag manager if anyone has a idea of different way

You just need to iterate over the nodeset and change each one in turn:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
anchortags.forEach(function(tag) {
tag.href = tag.href.replace('&lanekilde=', '');
});

Add hanging indent to CKEditor on web page [duplicate]

I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.

Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.

I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}

Can I pass a string variable into an <a href> tag for a website link?

I am somewhat new to web developing, so I am trying to learn along the way. I have a div that is 500 x 500. Inside of that div I have two divs that are each 250x500. So my outer div is filled up with the two inner divs.
I have it setup so that when I click on the first div (the left one) a JavaScript is called, and a prompt pop up box asks for a website URL which is then stored inside of a string variable.
How can I make it so that the second div (the right one) takes the string variable from the alert box from the left div and puts it into an a href tag so that I can link to the website from the right div?
Can a a href tag accept a value from a variable for its link? Maybe I am going about this all wrong, is there a better way I should be approaching this? Any help is appreciated!

There's the DOM creation method:
// Create an element
var aEl = document.createElement("a");
// Ask the user for the URL
aEl.href = prompt("Please enter the website URL");
// Determine whether to use innerText or textContent
if ("innerText" in aEl)
aEl.innerText = aEl.href;
else
aEl.textContent = aEl.href;
// Add the link to the right div
document.getElementById("rightDiv").appendChild(a);
Or the straight-up innerHTML method:
var url = prompt("Please enter the website URL");
document.getElementById('rightDiv').innerHTML = ''+url+'';

You can use:
document.getElementById('yourlink').href = 'entered link';
I haven't tested but I believe it should work.