Good afternoon everybody, i have issues to activate this function:
function clickMe(){return this.color="red"},inside of an object.
it should be triggered by button, here the code:
script>
var btn = document.querySelector("#btn");
var txt = document.querySelector("#txt");
btn.addEventListener("click",activeNewColor)
var objCss ={fontsize:"40px",
color:"pink",
click: function clickMe(){return this.color="red"}
}
let colorRed=objCss.click.bind(objCss);
var activeNewColor= () =>{
return colorRed()
}
//activeNewColor()
Object.assign(txt.style, objCss);
</script>
Like this?
function buttonClicked() {
const txt = document.getElementById('txt');
txt.style.color = 'red';
}
button {
color: green;
}
textarea {
width: 100%;
height: 100px;
font-size: 40px;
color: pink;
}
<div><button id="btn" onclick="buttonClicked()">Click me</button></div>
<textarea id="txt">Example text</textarea>
You can attribute style with different classes and use classList.toggle to remove/add a class from an element, like this :
var txt = document.querySelector("#txt");
function changeColor() {
txt.classList.toggle('pink');
txt.classList.toggle('red');
}
#txt {
font-size: 14px;
}
#txt.pink {
color: pink;
}
#txt.red {
color: red;
}
<button id="btn" onclick="changeColor()">Change text color</button>
<span id="txt" class="pink">text</span>
Related
I create a button, then the button is supposed to triggered a JS function that will call another JS function. I tried to put Alert function in JS to test if it triggered, but it didn't. Anyone can help me?
Why it didn't get triggered?
$(document).ready(function() {
$("#btnProcess3").attr("disabled", "disabled");
alert("hi")
jsProcess(0);
$("#btnProcess3").click(function() {
alert("hi")
$(this).attr("disabled", "disabled");
jsProcess(1);
});
});
function jsProcess(action) {
var page;
var sDate;
var sBizDate;
sDate = $('#txtDate').val();
if ($('#chkuseBizDate').is(':checked')) {
sBizDate = $('#txtBizDate').val();
} else {
sBizDate = sDate;
}
page = "LoadPPSFile_details01.asp?TaskId=<%=sTaskId %>&txtDate=" + (sDate) + "&RunProcess=" + action + "&txtBizDate=" + (sBizDate);
document.getElementById("IProcess").src = page;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<input type="button" name="btnProcess" id="btnProcess3" value="Start - Services" width="250" style="VISIBILITY:show; WIDTH: 150px; HEIGHT: 22px; Background-Color:#1E90FF; Border-Color:white; Color:white; Font-Weight:bold;Font-family:Verdana;Cursor:hand; "
/>
Your code is missing some code that the jsProcess() is looking for, but the Button performs as excepted, when you remove the Disabling part.
$(document).ready(function() {
// $("#btnProcess3").attr("disabled", "disabled");
// alert("hi")
// jsProcess(0);
$("#btnProcess3").click(function() {
alert("I'm triggered!")
$(this).attr("disabled", "disabled");
// jsProcess(1);
});
});
function jsProcess(action) {
var page;
var sDate;
var sBizDate;
sDate = $('#txtDate').val();
if ($('#chkuseBizDate').is(':checked')) {
sBizDate = $('#txtBizDate').val();
} else {
sBizDate = sDate;
}
page = "LoadPPSFile_details01.asp?TaskId=<%=sTaskId %>&txtDate=" + (sDate) + "&RunProcess=" + action + "&txtBizDate=" + (sBizDate);
document.getElementById("IProcess").src = page;
}
#btnProcess3 {
VISIBILITY: show;
WIDTH: 150px;
HEIGHT: 22px;
Background-Color: #1E90FF;
Border-Color: white;
Color: white;
Font-Weight: bold;
Font-family: Verdana;
Cursor: hand;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<input type="button" name="btnProcess" id="btnProcess3" value="Start - Services" width="250">
When there is already defined color style in css for p tag, using JS, cannot change the text color
var prelearnBtn = document.getElementById("copyto");
prelearnBtn.addEventListener("click", function() {
setTimeout(function() {
document.getElementById("quotedes").style.color = "blue";
}, 100);
});
p {
color: green;
font-size: 25px;
}
<code class="quotedes" id="quotedes">
<p>Hello</p>
</code>
<p>default text </p>
<button id="copyto">Click
</button>
You have to set new color to <p> tag. It is important for style priority.
var prelearnBtn = document.getElementById("copyto");
prelearnBtn.addEventListener("click", function() {
setTimeout(function() {
document.querySelector("#quotedes > p").style.color = "blue";
}, 100);
});
p {
color: green;
font-size: 25px;
}
<code class="quotedes" id="quotedes">
<p>Hello</p>
</code>
<p>default text </p>
<button id="copyto">Click
</button>
The code mentioned in the question works fine.
Except in this when you are changing the color to blue, you are changing it with the code snippet id. it should be done for the paragraph. Therefore, I fetched the first child of that id and assigned a style to that element.
var prelearnBtn = document.getElementById("copyto");
prelearnBtn.addEventListener("click", function() {
setTimeout(function() {
let parentEle = document.getElementById("quotedes");
parentEle.children[0].setAttribute('style', "color:blue");
}, 100);
});
p {
color: green;
font-size: 25px;
}
<code class="quotedes" id="quotedes">
<p>Hello</p>
</code>
<p>default text </p>
<button id="copyto">Click
</button>
var prelearnBtn = document.getElementById("copyto");
prelearnBtn.addEventListener("click", function() {
setTimeout(function() {
document.getElementById("quotedes").style.color = "blue";
}, 100);
});
p {
color: green;
font-size: 25px;
}
<code class="quotedes" id="quotedes">
<p>Hello</p>
</code>
<p>default text </p>
<button id="copyto">Click
</button>
#enter code here#
<body>
<script>
const btn = document.getElementById("copyto/");
const para = document.querySelector("p");
btn.addEventListener("click", function () {
para.quotedes = "colorRed";
});
</script>
<body>
var prelearnBtn = document.getElementById("copyto");
prelearnBtn.addEventListener("click", function() {
setTimeout(function() {
document.getElementById("quotedes").style.setProperty("--p-color", "blue");
}, 100);
});
p {
color: var(--p-color, green);
font-size: 25px;
}
h2 {
color: var(--p-color, green);
font-size: 14;
}
<code class="quotedes" id="quotedes">
<p>Hello</p>
<h2>Hello2</h2>
</code>
<p>default text </p>
<button id="copyto">Click
</button>
After entering value in the text box and pressing submit button, how to resize the textbox according to value inside. So the text center alignment displays properly(Using plain javascript or css).
<!DOCTYPE html>
<body>
<div class="block">
☀
<input type="text" id="inputValue" placeholder="Change City"></input>
<button type="submit" id="submit">Submit</button>
</div>
<style>
.block{
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#inputValue{
border: none;
}
#submit{
display: none;
}
</style>
<script>
var inputValue = document.querySelector("#inputValue");
var submit = document.querySelector("#submit");
inputValue.addEventListener("click",function(){
submit.style.display = "block";
});
submit.addEventListener("click",function(){
submit.style.display = "none";
});
</script>
</body>
</html>
I will give a example to you. Ge the idea from here
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>test</button>
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
As well as this is another way to do this , this will be better for you.
click here
function test(){
var getClass = document.querySelector( ".txt" );
var getValue = document.getElementById("inputBox").value.length
getClass.style.width = ((getValue + 1) * 8) + 'px';
}
<input class="txt" id="inputBox" type="text"><br>
<button onClick=test()>
test
</button>
The sun-icon is decorative and would therefore be suited to being in a CSS pseudo element rather than part of the main HTML.
It is not possible to add a pseudo before element to an input element, but we can give it a label and add the sun-icon in its before pseudo element.
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
We can also use this when the user clicks on submit. The text the user has input can become the label text - this will mean the user can select it if wanted, and can also click on it again to go back to edit it and submit (it is not clear from the question if this is what is required, but it seems logical to restore the input element on click).
let inputValue = document.querySelector("#inputValue");
let submit = document.querySelector("#submit");
let label = document.querySelector("#label");
inputValue.addEventListener("click", function() {
submit.style.display = "block";
inputValue.style.display = "inline-block";
label.innerHTML = '';
});
submit.addEventListener("click", function() {
submit.style.display = "none";
label.innerHTML = inputValue.value;
inputValue.style.display = 'none';
});
.block {
border: 2px solid;
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
label::before {
content: '\2600';
/* Unicode value for the HTML characer '☀';*/
}
#inputValue {
border: none;
}
#submit {
display: none;
}
<div class="block">
<label for="inputValue" id="label"></label>
<input type="text" id="inputValue" placeholder="Change City" />
<button type="submit" id="submit">Submit</button>
</div>
$('#axe, #saw').click(function(e) {
var id = $(this).attr('id');
if (id == 'axe') {
$(this).toggleClass('as-in-one as-one');
} else if (id == 'saw') {
$(this).toggleClass('as-in-two as-two');
}
})
.as-in-one {
color: red;
}
.as-one {
color: blue;
}
.as-in-two {
color: red;
}
.as-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>
In my code here I want to be able to change only one button's class, from red to blue, But if i clicked on another button, The first button turns to the default class red if it was blue and the other be toggled to blue And vice versa.
Maybe not how I'd like to do - but there you go! When axe is clicked, add the as-in-two class and remove the as-two class, and when saw is clicked, add the as-in-one class and remove the as-one class.
See demo below:
$('#axe, #saw').click(function(e) {
var id = $(this).attr('id');
if (id == 'axe') {
$(this).toggleClass('as-in-one as-one');
$('#saw').addClass('as-in-two');
$('#saw').removeClass('as-two');
} else if (id == 'saw') {
$(this).toggleClass('as-in-two as-two');
$('#axe').addClass('as-in-one');
$('#axe').removeClass('as-one');
}
})
.as-in-one {
color: red;
}
.as-one {
color: blue;
}
.as-in-two {
color: red;
}
.as-two {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>
Better to use a single red and blue class:
$('.as-in-one').click(function(e) {
$('.as-in-one').not(this).removeClass('as-one');
$(this).toggleClass('as-one');
})
.as-in-one {
color: red;
}
.as-in-one.as-one {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='as-in-one'>AXE</button>
<button id='saw' class='as-in-one'>SAW</button>
You don't need separate classes for the buttons, and if you use the same classes on them, it makes it easier: Just select the "other" button and reset its state:
$('#axe, #saw').click(function(e) {
var id = $(this).attr('id');
var other = $(id == 'axe' ? '#saw' : '#axe');
$(this).toggleClass('as-in as');
other.removeClass("as").addClass("as-in");
});
.as-in {
color: red;
}
.as {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>
I think You were looking for some thing like this.
$('#axe, #saw').click(function(e) {
if(!$(this).hasClass('as')){
$(this).toggleClass('as');
$(this).siblings().not(this).removeClass('as');
}
})
.as-in {
color: red;
}
.as {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>
I have created a simple text editor which shows the associated CSS results in real time. for example if a user clicks Bold Then text becomes bold while user is typing (it shows real time change). Same like this I want a button after click it will wrap the new text with a div tag with specified class or id.
I know wrap method can wrap the div or other tag. But after adding new div tags through wrap() I want store its result which contains newly added div tags. so that I can use those result to generate new html pages.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="texteditor.js"></script>
</head>
<body>
<div id="content" style="margin-top: 10px; height: 70%; text-align: center;">
<h2><u>Simple Text Editor Created Using jQuery</u></h2>
<div class="ze ie"></div>
<style>
.font-bold.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.selected {
background-color: orange;
}
#openpb {
margin: 15px;
}
</style>
<button type="button" class="g-button g-button-submit" id='stext'>Text</button>
<button type="button" class="g-button g-button-submit" id='shtml'>HTML</button>
<div id="controls" style="margin-bottom: 10px;">
<a id="bold" style="color: black; display: inline-block;" class="font-bold">
<button type="button">B</button>
</a>
<a id="italic" style="color: black !important; display: inline-block;" class="italic">
<button type="button">I</button>
</a>
<a id="link" class="link" style="display: inline-block;">
<button type="button">Link</button>
</a>
<select id="fonts" class="g-button">
<option value="Normal">Normal</option>
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="Monotype Corsiva">Monotype</option>
<option value="Tahoma New">Tahoma</option>
<option value="Times">Times</option>
<option value="Trebuchet New">Trebuchet</option>
<option value="Ubuntu">Ubuntu</option>
</select>
</div>
<iframe frameborder="0" id="textEditor" style="width: 500px; height: 80px; border: 2px solid #CCC; border-radius: 20px; overflow: auto;"></iframe>
<textarea name="text" id='text' style="border-radius: 20px; overflow: auto; display: none; padding-left: 10px;" rows="6" cols="53"></textarea>
</div>
</body>
</html>
here is Jquery: as you can I have used setinterval method to show result in real time in textarea. same like this I want a button which will wrap new or selected text with div tag with specified id and class and I want store this changes(newly added div tag) in textarea.
$(document).ready(function () {
document.getElementById('textEditor').contentWindow.document.designMode = "on";
document.getElementById('textEditor').contentWindow.document.close();
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
$("#bold").click(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
boldIt();
});
$("#italic").click(function () {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
ItalicIt();
});
$("#fonts").on('change', function () {
changeFont($("#fonts").val());
});
$("#link").click(function () {
var urlp = prompt("What is the link:", "http://");
url(urlp);
});
$("#stext").click(function () {
$("#text").hide();
$("#textEditor").show();
$("#controls").show()
});
$("#shtml").on('click', function () {
$("#text").css("display", "block");
$("#textEditor").hide();
$("#controls").hide();
});
});
function boldIt() {
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("bold", false, "");
edit.focus();
}
function ItalicIt() {
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("italic", false, "");
edit.focus();
}
function changeFont(font) {
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("FontName", false, font);
edit.focus();
}
function url(url) {
var edit = document.getElementById("textEditor").contentWindow;
edit.focus();
edit.document.execCommand("Createlink", false, url);
edit.focus();
}
setInterval(function () {
var gyt = $("#textEditor").contents().find("body").html().match(/#/g);
if ($("#textEditor").contents().find("body").html().match(/#/g) >= 0) { } else {
$("#text").val($("#textEditor").contents().find("body").html());
}
$("#text").val($("#textEditor").contents().find("body").html());
}, 1000);
I don't want use third party text editor plugins. in short I want texteditor which contain a button, after clicking this button it will wrap new text with div tag with specified class or id. something like Stack Overflow text editor...with facility of adding custom div with specified class or id.
<html>
<head>
<style>
#Problem{margin: 5px; outline: 1px dotted red; padding: 5px}
#Solution{margin: 5px; outline: 1px dotted green; padding: 5px}
#Solution textarea{
height: 200px;
width: 500px;
}
</style>
<script>
//Wraps the text in a new div with optional id and classname.
//Returns the new div.
function wrapMe(text, id, classname){
var tE = null;
if (text && text.trim() != ''){
tE = document.createElement('div');
tE.id = (id || '');
tE.className = (classname || '');
tE.innerHTML = (text || '');
}
return tE
}
//Adds the outer html of passed element to the textarea with a linebreak
function addElementToTextarea(e){
var tA = document.querySelector('textarea');
if (tA && e){
tA.innerHTML = (tA.innerHTML || '') + e.outerHTML + '

'
}
}
</script>
</head>
<body>
<div id = 'Problem'>
Problem: I don't want use third party text editor plugins. in short i want texteditor which contain a button, after clicking this button it will wrap new text with div tag with specified class or id. something like stackover flow text editor...with facility of adding custom div with speicifed class or id.
</div>
<div id = 'Solution'>
<input type = 'text' />
<button onclick = "addElementToTextarea(wrapMe(this.parentNode.querySelector('input').value, 'testid', 'testclass'))">Wrap me</button>
<br /><br />
<textarea readonly = 'readonly'></textarea>
</div>
</body>
</html>