Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
function App() {
const state=useMemoState();
const [btnOn, setBtnOn]=useState(false);
const colorOnClick=(e)=>{
const stateFilter=state.map(item=>{
var a=item.memos.current_memo===item.memos.num
return a;
});
console.log(stateFilter);
setBtnOn({
btnOn:!btnOn,
...stateFilter,
color:e.target.name
});
}
return(
<article
id="bgColor"
className={btnOn? state.filter(item=>item.memos.current_memo===item.memos.num).color : "yellow"
}>
<div id="color" class="texteditor">
<div class="colorpicker">
<button name="black" class="cbtn cbtn-black" onClick={colorOnClick}> <div></div></button>
<button name="white" class="cbtn cbtn-white" onClick={colorOnClick}><div></div></button>
<button name="red" class="cbtn cbtn-red" onClick={colorOnClick}><div></div></button>
<button name="blue" class="cbtn cbtn-blue" onClick={colorOnClick}><div></div></button>
<button name="yellow" class="cbtn cbtn-yellow" onClick={colorOnClick}><div></div></button>
</div>
);
}
Briefly, I am implementing Notepad and an array called state is in another file.
The code is written so that the background color changes when the button is pressed, so the goal is to find out what the pressed button is and put the name of the button in the color part of it. But the map function is not being used. Is there any other way?
There's a lot you need to fix on your code before worrying about the map call:
Your setBtnOn function (the function returned by useState) accepts a single parameter. So your call should be just setBtnOn(!btnOn).
Assuming the state is an array... The filter function returns another array, and your array most likely won't have a color attribute. So when you wrote your filter call, you most like were looking for a find call (which returns a single element).
You are probably missing some kind of code to update the state.
Fix those issues and then we can try to help you.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Using cheerio, $ is defined as cheerio object, I am trying to get two text (Current price and Original Price) from some elements which have only class no id defined in a html. Any clue how to achieve this ?
Here is the snippet of the html content which hold this two values,
<div class="buy-box__element">
<div class="clp-component-render">
<div class="clp-component-render">
<div class="ud-component--course-landing-page-udlite--price-text" ng-non-bindable="">
<div>
<div class="price-text--container--Ws-fP udlite-clp-price-text" data-purpose="price-text-container">
<div class="price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl" data-purpose="course-price-text"><span class="udlite-sr-only">Current price</span><span><span>₹700</span></span></div>
<div class="price-text--price-part--Tu6MH price-text--original-price--2e-F5 udlite-clp-list-price udlite-text-sm" data-purpose="original-price-container">
<div data-purpose="course-old-price-text"><span class="udlite-sr-only">Original Price</span><span><s><span>₹1,280</span></s></span></div>
</div>
<div class="price-text--price-part--Tu6MH udlite-clp-percent-discount udlite-text-sm" data-purpose="discount-percentage"><span class="udlite-sr-only">Discount</span><span>45% off</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
With X-path it is working,but I want to achieve this with cheerio. also tried with following
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")[0].innerText
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")
You can do something like:
$('span:contains("Current price") + span span').text()
Could you please try this?
the html should be the inner html, you can use puppeteer like libraries.Something like let html = await page.evaluate(() => document.body.innerHTML);
$('span:contains("Current price")', html).each(function() {
let CurrentPrice1 = $(this).next().text();
let CurrentPrice2 = Number(CurrentPrice1.replace(/[^0-9.-]+/g,""));
console.log(CurrentPrice1); //this with symbol
console.log(CurrentPrice2); //this for only fetching the numeric value
});
for Original price replace Current price with Original Price
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a button element that is hidden at the beginning.
However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-
What I actually want is :-
Here is my Html code:-
<div id="toolbar">
Launch Access Log Report <a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>
</div>
and my JavaScript code which push it to next line:-
function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}
What is messing it up please explain and how can I fix this issue.
display: block will start on a new line and will take up the full width available. Use display: inline-block or display: inline instead.
Using display: block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "block";
}
</script>
Using display: inline-block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "inline-block";
}
</script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'd like to get all a Elements which got contain the classes menu-item-link and mk-image-link. Is the following expression right?
a[class*="menu-item-link"], a[class*="mk-image-link"]
Didn't get anything selected so I guess not :)
Thanks for the help.
Best regards,
Anton
You have to do this 'a.menu-item-link, a.mk-image-link' it will check if a has this class.
const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')
console.log(selected)
console.log(selected2)
<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">
document.querySelectorAll allows grouping of selectors.
Note that, it would select all elements which has the specified class names, so a wild-card is not needed. i.e. if you are aiming at menu-item-link and mk-image-link the below should work for you.
So, you could try the below:
var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
element.style.backgroundColor = "#999";
});
<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
Something
<br>
Another Something
<br>
Another Something
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>Change an HTML element</h1>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
Can someone explain what this does?
When you click on the first button it fires an onclick event attribute. You've told the event to find an element by the ID of 'msg'. Which is the <p> tag above.
It finds it and then replaces the innerHTML value of "Now you see me" with the string 'Gone!'. Pretty much the same thing happens with the second button.
You can learn more about it at the web address below.
http://www.w3schools.com/tags/ev_onclick.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
If I put a select tag inside ng-switch then two way binding does not work for select tag ng-model outside ng-switch.
Please refer following code
<div ng-switch on="OutputStep">
<div ng-switch-when="0">
Switch Step One
</div>
<div ng-switch-when="1">
Switch Step Two<br/>
<select ng-model="SelectedReviewOption" ng-options="review as review.DisplayValue for review in ReviewOptions">
</select>
Selected Value : {{SelectedReviewOption.DisplayValue}}
</div>
</div>
<button ng-click="OutputStep = '0'" ng-disabled="OutputStep == '0'">
Back
</button>
<button ng-click="OutputStep = '1'" ng-disabled="OutputStep == '1'">
Next
</button>
Selected Value Outside Switch : {{SelectedReviewOption.DisplayValue}}
In this fiddle, click Next button to view 2nd switch page. Change value in select tag. Observe that changed value cannot be displayed outside switch –
Having a '.' in your models will ensure that prototypal inheritance is in play. So, use
<input type="text" ng-model="someObj.prop1"> rather than
<input type="text" ng-model="prop1">
working fiddle
understanding scope
Use $parent.var_name in ng model , as ng switch creates it seperate scope , and the variable will be restricted to it if its not explicitly defined outside the scope by ng-init or something(in the controller)
Here is now..
You need to use $parent to get to parent scope, outside the switch block
$parent.SelectedReviewOption
http://jsfiddle.net/cobc0u3p/6/