Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to make a website. But I need to make a syntax highlighting program that Categorize commands based on what they do. For example, one group would be I/O, another one would be Control commands. And you would color the text based off of what type of command it is. Please I need help.
<html>
<head>
<div class=“io”>Text goes here</div>
div.io {
color: #0A0A0A;
</head>
<!--
PREFIX = 'lang/'
SUFFIX = '.js'
-->
<body onload="sh_highlightDocument('lang/', '.js');">
<!--
CLASS = 'sh_java'
PREFIX + CLASS + SUFFIX = 'lang/' + 'sh_java' + '.js'
= 'lang/sh_java.js'
-->
<pre class="sh_java">
public class X {}
</pre>
</body>
</html>
There are a few problems with your code above:
You are writing your <div> in the <head> section, which is invalid HTML
You are using curly “ ” quotes on your <div> class declaration, which won't work
In addition to this, your question is incredibly vague. There don't appear to be any 'control commands' in your question.
Having said that, it sounds like you're trying to turn the text in the io class red, and some additional content in a control-commands class green.
This can be done with JavaScript's .getElementsByClassName() method and .style property as follows:
function change() {
document.getElementsByClassName('io')[0].style.color = 'red';
document.getElementsByClassName('control-commands')[0].style.color = 'green';
}
<div class='io'>IO</div>
<div class='control-commands'>Control Commands</div>
<br />
<button onclick="change()">Change</button>
Keep in mind that .getElementsByClassName returns a Node List, so you need to access the first index of that with [0] as above.
Hope this helps!
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
<div class="main-div main-div2"> <!-- IF up to date, main-div3 -->
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"
What kind of loop would be good for this Javascript function too if I want it to be
checking constantly?
Thank you.
there are many method to do it, here is the basic idea that you can get it done.
var btnText = document.getElementById("update-btn").innerText
var divClass = document.getElementById("outer-div")
if(btnText == "Up to date"){
divClass.classList.remove("main-div2");
divClass.classList.add("main-div3");
}else{
divClass.classList.remove("main-div3");
divClass.classList.add("main-div2");
}
.main-div2{
background-color:red;
}
.main-div3{
background-color:blue;
}
<div id="outer-div" class="main-div main-div2">
<button id="update-btn" class="btn update-btn">
Up to date
</button>
</div>
checkout the above snippet, its checking the text In if condition and sets up the class for parent div according to the text in the button, you can read more about adding and removing class from here
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm trying to verify whether a check box is checked or not in the selenium code. It gets added ::after once the checkbox is checked but I'm not able to verify that pseudo element exist or not. Can anybody please help me to resolve that issue? I was not able to find a correct JavaScript snippet for that.
You want to find the element and use isSelected.
isChecked = driver.findElement(By.xpath("label[class='labelContainer']/input")).isSelected();
You could check pseudo element properties properties. E.g.
console.log(window.getComputedStyle(document.querySelector('h1'), '::after').getPropertyValue('content'));
<html>
<head>
<meta charset="UTF-8" />
<style>
h1::after {
content: "new";
}
</style>
</head>
<body>
<h1>site</h1>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
am new to web development i have developed one website and now i want to place a text field on top corner and give options to pick a city and display content based on selected city. for example: in a web page i should have a text box, if i enter some city name it should display tat cities contents (use case: if i select Delhi it should display Delhi's content, if i select Mumbai it should display Mumbai's content how can i achieve this task ) any code, any references can be appreciated, Thanks in advance. (HTML, javascript, java anything is ok)
Here is something like what you want, you can make a popup instead of a dropdown if you want. Tell me if you need anymore help, or need to understand the code. This code is based of Dmitriy Lishtvan's answer for this question. I just made it relate to your question.
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
.desc {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectOption">
<option>--Choose One---</option>
<option>Chennai</option>
<option>Washington</option>
<option>Hamburg</option>
</select>
<div id="changingArea">
<div id="Chennai" class="desc"><iframe height=900 width=900 src="https://en.wikipedia.org/wiki/Chennai"></iframe></div>
<div id="Washington" class="desc"><iframe height=900 width=900 src="https://www.washingtonpost.com"></iframe></div>
<div id="Hamburg" class="desc"><iframe height=900 width=900 src="https://www.tripadvisor.com/Tourism-g187331-Hamburg-Vacations.html"></iframe>
</div>
</div>
In Java you can use the TextField class to have the user input. Then you can use a JButton and then when the user clicks the button the corresponding content(Organize the content with an array).
Link to info about TextFields
https://docs.oracle.com/javase/tutorial/uiswing/components/textfield.html
Also JButton
https://docs.oracle.com/javase/tutorial/uiswing/components/button.html
Good Luck!
I think this is what you want
`http://jsfiddle.net/XCUDF/`
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I try to implement like SO code highlight with pretty-print. How to get comment before pre tag?
<!-- language: some -->
<pre>
...
How to get comment before pre tag?
It requires you to loop through the nodes and check the nodeType and read its nodeValue. An element is a nodeType of 1 and a comment is a nodeType of 8.
HTML:
<p>Apple</p>
<!-- language: some -->
<pre id="one">One</pre>
<!-- language: someOther -->
<pre id="two">two</pre>
<pre id="three">three</pre>
JavaScript:
var pres = $("pre");
pres.each(
function() {
var prevSibling = this.previousSibling;
var nodeValue = null;
while (prevSibling && prevSibling.nodeType!==1) {
if (prevSibling.nodeType === 8) {
nodeValue = prevSibling.nodeValue;
}
prevSibling = prevSibling.previousSibling;
}
console.log(this.innerHTML, nodeValue);
}
);
Example:
JSFiddle
Most web browsers completely ignore comments. Instead, try to do something like this
Even if it's possible to read comments on a page, I believe any of the following approaches would be better because comments should be separate from code.
<pre class="language">
or
<pre data-language="language">
So then you can access it with
$(".language")
or
$("pre[data-language=language]")