I need to pull the sku (CS060120) from this section of html (edit:) Using VBA
tried getAttribute and getElementsbyTag(and Class)Name but I am not able to get the return I am looking for. Anyone know how to do this?
<section class="product_options">
<header>
<h1>
60' x 120' NiceRink CS Liner
</h1>
</header>
<vue-product-options
v-bind:product-opts="[]"
v-bind:configurable-payload="{"product_option":{"extension_attributes":{"configurable_item_options":[]}}}"
v-bind:liner-types="{"good":16,"better":14,"best":15}"
v-bind:is-folded-or-rolled-liner-sku="false"
v-bind:bundle-payload="{"product_option":{"extension_attributes":{"bundle_options":[]}}}"
v-bind:tier-prices="[]"
v-bind:is-wholesale-only="false"
v-bind:prices-index="{}"
v-bind:options-map="{}"
v-bind:is-configurable="false"
v-bind:is-rink-liner="false"
v-bind:is-liner-sku="true"
v-bind:is-bundle="false" product-type="undefined" price="612" sku="CS060120" image="https://www.nicerink.com/media/catalog/product/l/i/liner_1.jpg" magento-base-url="https://www.nicerink.com" name="60' x 120' NiceRink CS Liner">
</vue-product-options>
<div class="product_options_panel package_cta">
<h3>
Looking for a full Rink Package?
</h3>
<p>
We've got you covered!
</p>
<a class="button dark" href="/rink-builder">
Rink Packages
</a>
</div>
</section>
This is what I'm trying:
ieDoc.getElementsByClassName("product_options")(0).getAttribute("sku")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($(".sdfv").attr("sku"));
});
});
</script>
</head>
<body>
<vue-product-options class="sdfv" sku="CS060120"></vue-product-options>
<button>Click the button to get sku value</button>
</body>
</html>
Try using attribute selector
Debug.Print ie.document.querySelector("[sku]").getAttribute("sku")
If you need to be more specific you can add the type selector so it becomes
Debug.Print ie.document.querySelector("vue-product-options[sku]").getAttribute("sku")
Related
edit: I can only access to the html of the div with the id
I want to do something similar to this but i can't access to css file due to my companies setup. I need to do this from HTML without css
<html>
<head>
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
"I need to do this from HTML without css"
I'm assuming for some reason you cannot use style blocks <style></style> in your html, e.g. in some email contexts.
You can overcome this by using inline style style="background-color:yellow;"
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input style="background-color:yellow;">
</div>
</div>
</div>
</body>
</html>
Edit based on Javascript
"thanks but I can only edit the html of the div with the id"
So this is the javascript that you can insert into the html code.
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
<html>
<head>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
If you are inserting into the html text directly, you need to put them within the <script></script> block before adding them at the bottom of the html just before </body>:
...
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
</body>
There are a few different ways you can handle this, but it kind of depends on what you mean by saying you can't use CSS. The HTML is pretty much always styled with CSS. But you can add CSS a few different ways.
Inline style: This is what I suspect you might need. Place a style attribute in the div and provide it with the appropriate directions. Example:
<div id = "fileView_ctl01_D_STRT" style="background-color: yellow;">
An internal stylesheet: As you've demonstrated above, you can embed an internal stylesheet.
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
Javascript: Finally, you can control styles with Javascript. You have to grab the element you want to style, for example, with the id you've assigned, and apply a style to it. Just as chatnoir has demonstrated:
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
This code can be in a separate, external file that you call to in the HTML via the "src" attribute.
Without CSS, you're pretty much limited to this stuff: https://stackoverflow.com/a/21951731/7055314.
I am trying to develop a simple back-end widget for asp. Since, I am new to ASP, I chose JavaScript as ASP language. I think I don't have the right tool to write to output. Response.Write() sends output directly to the start of the page. What I am missing here?
Hers is the code that I made:
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<script language=Javascript runat=server>
Response.Write("Hello JS");
</script>
</body>
</html>
which is giving the following output:
Hello JS <!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
</body>
</html>
There is a great answer on the subject here but basically if you want this to work change the above code block as follows;
<!DOCTYPE html>
<html>
<body>
<h2>Hello world</h2>
<% Call Response.Write("Hello JS"); %>
</body>
</html>
You can also replace the above line of code with <%= "Hello JS" %> as a shortened form of Response.Write() method.
if you want to use javascript then it should be like this:
<script language=Javascript>
alert("Hello JS");
</script>
or
<script language=Javascript>
alert('<%=SomeVarfromASP%>');
</script>
Those will give you POP up boxes with your message or in your case value of your variable in it.
Basically when you put "<%=" it is pretty much like you say please write this...
If you need something to be typed/printed on the page by JavaScript you will need to use more specialized functionality such as getelementbyid or similar.
Your code would look like:
<html>
<head>
<script type="text/javascript">
function ChangeGreet()
{
var vgreet = document.getElementById("JSGreet");
vgreet.innerHTML = 'Hello JS';
}
</script>
</head>
<body onload="ChangeGreet()">
<div>Hello MS</div>
<div id="JSGreet"> </div>
</body>
</html>
JavaScript and VBScript(Classic ASP) have their own syntax. Look it up at http://www.w3schools.com/js/DEFAULT.asp. It has great tutorials for beginners in both languages.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
The following code displays only the input box when run in the browser (Chrome). It seems to have broken when I attempted using the ng-controller directive.
<!doctype html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"> </script>
<script>
function SController($Scope) {
$Scope.customers =
[{name:'John Smith',city:'Kingston'},
{name:'Jane Doe',city:'Ocho Rios'},
{name:'Brian Wade',city:'Negril'},
{name:'John Barker',city:'Mandeville'} ];
}
</script>
</head>
<body ng-controller="SController">
<div class="container">
<input type="text" data-ng-model="name"/>
<ul>
<li ng-repeat="person in customers | filter:name | orderBy:'city'">{{ person.name}} - {{ person.city }} </li>
</ul>
</div>
</body>
</html>
Well, at first sight, it seems that you're using $Scope instead of the correct $scope. Replace those occurrences and try again.
I'm attempting to use a fancy JSslider, with a project I'm working on for school and I can't seem to understand why I can't get it working. It should be simple...
<link href='http://fonts.googleapis.com/css?family=Merienda One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<div id="wTurkey">
<h1> The Wild Turkey</h1>
<div class="coin-slider">
<a href="" target="_blank">
<img src='images/cotside.jpg'>
<span>
<p>The Wild Turkey</p>
Some text here
</span>
</a>
At the very end of my body tag I have the following
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({hoverPause: false });
});
</script>
</body>
Here's the original site. http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ I'm just basicly looking for a second set of eyes to tell me what's wrong.
The problem is with your jQuery selector:
$('#coin-slider')
should be
$('.coin-slider')
The 'dot' denotes a css class rather than an ID (which is denoted by the # symbol)