Java Script
const cardDropdownTemplate = document.querySelector('[Card-Dropdown-Template]');
const cardDropdownContainer = document.querySelector('[card-dropdown-container]');
SearchBoxMainNav.addEventListener('input', async(event) =>{
var input = document.getElementById('SearchTerm').value;
const card = cardDropdownTemplate.content.cloneNode(true).children[0];
cardDropdownContainer.innerHTML = "";
if (input != "") {
var result = cardSearch(input);
console.log(result);
for (var i = 3; i > -1; i--) {
const name = card.querySelector("[Ygo-Card-Name]");
const desc = card.querySelector("[Ygo-Card-Desc]");
name.textContent = result[i].name;
desc.textContent = result[i].desc;
cardDropdownContainer.append(card);
}
console.log(card);
console.log(result);
}
})
Html
<div class="dropdown-Content" card-dropdown-container ></div>
<template Card-Dropdown-Template>
<div class="card-dropdown">
<div class="card-name" Ygo-Card-Name></div>
<div class="card-description" Ygo-Card-Desc></div>
</div>
</template>
So I have this code, when it executes it listens for an input then sends that input into my api searcher, it searches the api for the 4 most simmilar listings in name then Uses a dom template to create a box and puts all the information in it so i can make a Dropdown.
My problem is currently it is only creating one Box and is just overwriting the information in that one box instead of making multiple boxes. Am I just using append wrong or what? When i watch it in slow mo The data gets overwriitten even before the append is reached in the code, so maybe its just drawing the template in real time after the append and the append only makes a new box that first time then does nothing the rest of the times?
Related
I Want the code to get the number the user has entered and display it on the screen. I know that its just a dumb mistake that I have made.
function run() {
const quest = document.getElementById('quest');
const data = quest.value;
const element = document.createElement('div').innerHTML = data
const store = document.getElementById('store');
store.appendChild(element)
}
body {
text-align: center;
}
<h1>Calucator</h1>
<input type="number" name="" id="quest">
<button onclick="run()">=</button>
<div id="store"></div>
As the comments in your question pointed - document.createElement('div').innerHTML = data is not a document node element
And use .textContent instead of .innerHTML - otherwise you'll introduce an XSS vulnerability.
function run() {
const quest = document.getElementById("quest");
const data = quest.value;
const yourElement = document.createElement("div");
yourElement.textContent = data
const store = document.getElementById("store");
store.appendChild(yourElement);
}
What i changed in the function?
I first create the element, and then set it's text content. Finally i append it to the element you wanted.
Hi i have many forms inside multiple pages all of them the with the same id (success message) after submitted and same class names when i'm sending the form which e.g inside home page i put element selector through id with Page PATH with match regex something like that \/(en|es)\/ it works good without problem ... but when i'm going to page www.something.com/send-something/233?search=profile the form submitted through old id which was for home page i tried to inject custom javascript something like :
function() {
var els = document.querySelectorAll('#sendReqSurgyForm1');
for (var i = 0; i < els.length; i += 1) {
if (els[i] === {{Page URL}}) {
return i;
}
}
return '(nothing sent)';
}
with adding matching Page URL with match regex something like that to https:\/\/www\.something\.com\/(ar|en)\/send-something\/[0-9]+\?source=[a-zA-Z]+\_?[a-zA-Z]+
to matching the url: www.something.com/send-something/233?search=profile
the trigger always works with home page but trigger which located in www.something.com/send-something/233?search=profile not success and the result of javascript always returns nothing sent .. please help to fix this problem
Hi the Answer is SPA Angular using SPA so it can be multiple form with the same component so i solved this problem through setting id for every form with different urls
for example if you have multiple forms in angular inside multiple routing page as i explained in the main topic question .. to fix this problem you can setting id for every form submissions through js by setting new id for every form submission by setting Attribute for id based different urls.
main_id = exampleForm
function(){
var ids = document.getElementById("exampleForm");//main id
var current_url = window.location.href;//current url of visitor
var dir_match = location.pathname+location.search;//the path of website after .com
var send_req = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en]n/)+'/surgery-request/'+dir_match.match(/[0-9]+/)+'?source=profile';//link1 which have form1
var send_req2 = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en]n/)+'/surgery-request/'+dir_match.match(/[0-9]+/)+'?source=profile2';//link2 which have form2
var home_url = 'https://www.example.com/'+dir_match.match(/[ar][r]|[en][n]/)+'/';//link3 which have form3
if(current_url == send_req){
/* if current_url equal to link1 set new id e.g = `forms_req_surgery` */
last_send_req = ids.setAttribute("id", "forms_req_surgery");
var elm = document.getElementById('forms_req_surgery');
var last_var = elm.id;/* get the name of id */
return last_var; // return the name of id after changed set
}else if(current_url == home_url){
last_home_url = ids.setAttribute("id", "home_req");
var elm2 = document.getElementById('home_req');
var last2_var = elm2.id;
return last2_var;
}else if(current_url == send_req2){
last_send_req2 = ids.setAttribute("id", "forms_req_surgery2");
var elm3 = document.getElementById('forms_req_surgery2');
var last3_var = elm3.id;
return last3_var;
}
}
I want something like that..
https://pl.sports-streams-online.best/?st=nbastream.tv&plcm=db&q=Raptors+vs+Lakers
See that URL part q=Raptors+vs+Lakers, If i input any text on this section it will automatically change on website body. I want to know how i can do this. I will input a text in URL and it will display on website body.
Thanks for advance.
You can parse window.location and put that into a div on your page. I can't show you in a code snippet because the snippets use an iframe but if your html has <div id='uText'></div> then you can use javascript (after the page has loaded) to set the value of that div with results of the query param. lets say your url ends in ?st=nbastream.tv&plcm=db&q=Raptors+vs+Lakers, then you want the value for parameter 'q':
function getQueryStringParam(param) {
var url = window.location.toString();
url.match(/\?(.+)$/);
var params = RegExp.$1;
params = params.split("&");
var queryStringList = {};
for(var i = 0; i < params.length; i++) {
var tmp = params[i].split("=");
queryStringList[tmp[0]] = unescape(tmp[1]);
}
return decodeURIComponent(queryStringList[param]);
}
let qParam = getQueryStringParam('q').split('+').join(' ');
const div = document.getElementById('uText');
div.innerHTML = qParam;
Check out the codepen here.
I have a form that has multiple fields all with the same class. These are populated with URL's that follow the same structure. I am trying to extract the same section from each URL. So far var res = x.split('/')[5]; will achieve this but only for the first URL. I can also use var x = document.querySelectorAll(".example") to change all the url's but I cannot find the correct way to combine both of these function. so far my code looks like this:
script>
function myFunction() {
var x = document.querySelectorAll(".example").innerHTML;
var res = x.split('/')[5];
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = res;
}
}
</script>
I have looked around but can't find a solution that fits. Thanks in advance for your help.
So loop over the HTML Collection, this is making assumptions based on code.
// Find all the elements
var elems = document.querySelectorAll(".example")
// loop over the collection
elems.forEach(function (elem) {
// reference the text of the element and split it
var txt = elem.innerHTML.split("/")[5]
// replace the text
elem.innerHTML = txt
})
<div class="example">1/2/3/4/5/a</div>
<div class="example">1/2/3/4/5/b</div>
<div class="example">1/2/3/4/5/c</div>
<div class="example">1/2/3/4/5/d</div>
<div class="example">1/2/3/4/5/e</div>
<div class="example">1/2/3/4/5/f</div>
Im developing a prototype mobile web app that mimics a shopping cart. Ive been able to create the shopping cart and add products to the cart. The trouble im having is overwriting the total cost value. Im able to convert the values in order to perform the calculation but im unable to overwrite the value where the total value is stored. Here is the code ive got to far:
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">Title</div>
<div class="ui-block-b">Format</div>
<div class="ui-block-c">Price</div>
<div class="ui-block-a"><p id = "myTitle"></p></div>
<div class="ui-block-b"><p id = "myFormat"></p></div>
<div class="ui-block-c"><p id = "myPrice"></p></div>
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"><p id="myTotal"></p></div>
</div>
</div>
Now i wish to update the value stored in the "myTotal" id. I have a function called addtocart() and here is the code for that:
`
var total = 0;
function addtocart() {
var title = game.Title ;
var price = game.Price ;
var format = game.Format ;
var newParagraph = document.createElement('p');
newParagraph.textContent = title;
var newParagraph2 = document.createElement('p');
newParagraph2.textContent = format;
var newParagraph3 = document.createElement('p');
newParagraph3.textContent = price;
document.getElementById("myTitle").appendChild(newParagraph);
document.getElementById("myFormat").appendChild(newParagraph2);
document.getElementById("myPrice").appendChild(newParagraph3);
price = parseInt(price, 10);
price = total + price;
var newParagraph4 = document.createElement('p');
newParagraph4.textContent = total;
document.getElementById("myTotal").appendChild(newParagraph4);
}
`
Now i know the appendChild is for adding text to a document but I can seem to find a solution to overwrite the value with the new value stored in 'total' when a new item is added.
Thanks in advance :)
Use the innerHTML property. This will set the HTML inside the element to whatever you set, rather than adding a node.
var newParagraph4 = "<p>" + total + "</p>";
document.getElementById("myTotal").innerHTML = newParagraph4;
This performs less DOM manipulations and is faster than creating the paragraph on the DOM and then adding it.
Change .textContent to innerHTML:
var newParagraph4 = document.createElement('p');
newParagraph4.innerHTML = total;